"Elements should not have tabindex greater than zero" - 非零 Tabindex 破坏验证和 508 合规性

"Elements should not have tabindex greater than zero" - Nonzero Tabindex Breaks Validation & 508 Compliance

我们是 运行 一个名为 Axe 的工具,用于检查 HTML 页的有效性和 508-compliance/accessibility。

此错误是违规行为:

Elements should not have tabindex greater than zero

该应用程序采用顶部链接和导航栏结构。如果我们不放入 tabindex,则制表符将从这些元素开始。这个想法是在进入页面时直接点击表单输入。这当然有意义并且应该被允许(即使对于残疾用户)?那为什么合法的用例会被标记?

<input id="phone" name="phone" tabindex="5" placeholder="" class="input-block-level" type="text" value="222">

在 HTML 中允许有一个大于零的 tabindex,不管 AX 怎么说。

但是,您使用 tabindex 的方式是向视力正常的用户呈现信息,而这些信息基本上对视力不佳的用户不可用,因为他们无法使用 Tab 键。

解决这个问题的更好方法是使用隐藏的“skip links”。

The idea is simple enough: provide a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content.

https://webaim.org/techniques/skipnav/

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

对于使用放大镜的低视力用户,他们的视口将被移动以包括具有焦点的元素。通常当页面加载时,焦点会转到 DOM 中第一个可以接收焦点的元素。这通常是左上角的 "home" 徽标(对于 LTR languages)。因为视口位于左上角,低视力用户会知道他们可以将视口向右或向下拖动以探索页面的更多内容。但如果最初的焦点在页面中间的某个地方,那可能会让人迷失方向。用户可能不知道他们所在的页面 在哪里 。视口从左上角移动了多远?他们可以向上或向下、向左或向右探索多远?

对于极低视力或 visually-impaired 或盲人用户,使用屏幕 readers 的用户,迷失方向更加严重。屏幕阅读软件具有出色的导航工具,因此可以轻松浏览页面的各种元素,前提是使用了语义 html 元素,例如

或 或