html - “元素的tabindex不应大于零”-非零Tabindex会破坏验证和508合规性

尽管AX在说什么，但HTML中允许tabindex大于零。

但是，您使用tabindex的方式是向有视力的用户显示信息，这实际上使非有视力的用户无法使用它们，因为他们无法浏览。

一种更好的方法是使用隐藏的“ skip links”。

这个想法很简单：在页面顶部提供一个链接，可将用户跳至主要内容开头的锚点或目标。

对于有视力的用户，最好将焦点放在第一个可操作的元素上，例如amazon.com上的搜索字段（尽管他们不这样做）。但是有视力的用户可以快速浏览整个页面。他们可以看到焦点相对于页面其余部分的位置（假设您有焦点指示器2.4.7），并且会立即知道焦点位置之前有导航元素，焦点位置之后还有更多可以交互的内容

对于使用放大镜的低视力用户，其视口将转移为包括具有焦点的元素。通常，在页面加载时，焦点将移至DOM中可以接收焦点的第一个元素。通常，这是左上角（“ LTR languages”的“主页”徽标）。由于视口位于左上方，因此弱视用户将知道他们可以将视口向右或向下拖动以浏览页面的更多内容。但是，如果最初的焦点位于页面中间，则可能会迷失方向。用户可能不知道他们在页面上的位置。视口距左上角有多远？他们可以向上或向下，向左或向右探索多远？

对于视力低下或有视觉障碍或失明的用户（使用屏幕阅读器的用户），迷失方向更加严重。屏幕阅读软件具有出色的导航工具，因此只要使用了语义html元素（例如

或或
），就可以轻松浏览页面的各种元素。您可以使用“ H”键导航至标题，通过“ T”键导航至表格，并通过“ L”键导航至列表。但同样，屏幕阅读器用户希望初始焦点位于左上方。他们当然可以调整自己的方向并弄清楚它们在页面上的位置，但是确实需要一些认知上的努力，类似于屏幕放大镜用户。

那么您如何为所有这些类型的用户（以及许多其他类型的用户）带来愉快的体验？

作为一个答案，“ skip links”非常方便。用可访问性术语来说，它们称为“ bypass blocks”（2.4.1）。它们允许默认焦点位于左上角（或默认焦点所在的位置），并且当您单击 `tab` 时，焦点将移至“跳过链接”，这是一个页面内链接，可让您您跳到页面的主要部分。这对于仅键盘用户（可能是有视觉障碍或有视觉障碍的用户），屏幕放大镜用户和屏幕阅读器用户来说非常有用。

但是，如果您确实希望焦点位于特定元素上，则如果该元素是或

“元素的tabindex不应大于零”-非零Tabindex会破坏验证和508合规性

2 个答案: