"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.
对于有视力的用户来说,将注意力集中在第一个可操作元素上是很好的,例如 amazon.com 上的搜索字段(尽管他们不这样做)。但是有视力的用户可以快速浏览整个页面。他们可以看到焦点相对于页面其余部分的位置(假设您有一个焦点指示器,2.4.7),并且会立即知道在焦点位置之前有导航元素,在焦点位置之后有更多可以交互的东西.
对于使用放大镜的低视力用户,他们的视口将被移动以包括具有焦点的元素。通常当页面加载时,焦点会转到 DOM 中第一个可以接收焦点的元素。这通常是左上角的 "home" 徽标(对于 LTR languages)。因为视口位于左上角,低视力用户会知道他们可以将视口向右或向下拖动以探索页面的更多内容。但如果最初的焦点在页面中间的某个地方,那可能会让人迷失方向。用户可能不知道他们所在的页面 在哪里 。视口从左上角移动了多远?他们可以向上或向下、向左或向右探索多远?
对于极低视力或 visually-impaired 或盲人用户,使用屏幕 readers 的用户,迷失方向更加严重。屏幕阅读软件具有出色的导航工具,因此可以轻松浏览页面的各种元素,前提是使用了语义 html 元素,例如
或
或 。您可以使用 'H' 键导航到标题,通过 'T' 键导航到 tables,通过 'L' 键导航到列表。但同样,screen reader 用户会期望初始焦点位于左上角。他们当然可以定位自己并找出他们在页面上的位置,但这确实需要一些认知努力,类似于屏幕放大镜用户。
那么您如何为所有这些类型的用户(以及许多其他类型的用户)提供愉快的体验?
正如一个答案所说,“skip links" are very handy. In accessibility terms, these are called "bypass blocks”(2.4.1)。它们允许默认焦点位于左上角(或默认焦点所在的任何位置),当您 tab 时,焦点移动到 "skip link",这是一个 in-page link 让你跳转到页面的主要部分。这非常适合 keyboard-only 用户(可能是视力正常的用户或 visually-impaired 用户)、屏幕放大镜用户和屏幕 reader 用户。
但是,如果您确实希望焦点位于特定元素上,如果该元素是 或
将初始焦点放在页面上除第一个元素以外的某个位置并不是 WCAG 违规行为,因此您可以将其放在表单上,只是以一种减少有限用户混淆的方式进行视力或不能使用鼠标。
有关 tabindex
的更多信息,请参阅“5.5 Keyboard Navigation Between Components (The Tab Sequence)”。请注意,对于大于 0 的 tabindex 值,它表示:
"Authors are strongly advised NOT to use these values."
我们是 运行 一个名为 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.
对于有视力的用户来说,将注意力集中在第一个可操作元素上是很好的,例如 amazon.com 上的搜索字段(尽管他们不这样做)。但是有视力的用户可以快速浏览整个页面。他们可以看到焦点相对于页面其余部分的位置(假设您有一个焦点指示器,2.4.7),并且会立即知道在焦点位置之前有导航元素,在焦点位置之后有更多可以交互的东西.
对于使用放大镜的低视力用户,他们的视口将被移动以包括具有焦点的元素。通常当页面加载时,焦点会转到 DOM 中第一个可以接收焦点的元素。这通常是左上角的 "home" 徽标(对于 LTR languages)。因为视口位于左上角,低视力用户会知道他们可以将视口向右或向下拖动以探索页面的更多内容。但如果最初的焦点在页面中间的某个地方,那可能会让人迷失方向。用户可能不知道他们所在的页面 在哪里 。视口从左上角移动了多远?他们可以向上或向下、向左或向右探索多远?
对于极低视力或 visually-impaired 或盲人用户,使用屏幕 readers 的用户,迷失方向更加严重。屏幕阅读软件具有出色的导航工具,因此可以轻松浏览页面的各种元素,前提是使用了语义 html 元素,例如