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

3
我们正在运行一个名为Axe的工具,以检查HTML页面的有效性、508合规性和可访问性。
这个错误被标记为违规:

元素不应该有大于零的tabindex

该应用程序由顶部链接和导航栏组成。如果我们不加入tabindex,Tab键会从这些元素开始。想法是在进入页面时直接点击表单输入框。这当然是有道理的,应该被允许(即使对于残疾人士)。那么为什么一个合理的用例会被标记呢?

image of the form layout


(该段为HTML代码,无法直接翻译,以上为代码的中文解释)

imageof the error message


这会导致无法访问的问题。我认为是因为每个tabindex都被读取了,或者其他原因,请参见此处:http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html 显然,您应该仅对第一个元素使用tabindex =“0”,然后按照HTML DOM顺序设置tabindex顺序(而不是专门设置tabindex)。 - elveti
很不幸,“tabindex=0” 对第一个并没有用。你贴的链接里写到:设置 tabindex="0" 会让一个元素可以被聚焦。这并不会设置元素在 Tab 键顺序中的位置,它只是允许用户按照 DOM 中的位置顺序聚焦到元素上。我已经尝试过了,但我的光标仍然先聚焦在顶部栏上。 - gene b.
2个回答

5

尽管AXE声称不允许tabindex大于零,但在HTML中是允许的。

然而,您使用tabindex的方式向有视力的用户呈现了基本上无法让无视力的用户使用的信息,因为他们无法通过tab键到达该信息。

更好的方法是使用隐藏的“跳过链接”。

这个想法非常简单:在页面顶部提供一个链接,使用户跳转到主内容开头的锚点或目标。

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


5
对于有视力的用户来说,将焦点放在第一个可操作元素上很好,比如亚马逊网站上的搜索框(尽管他们没有这样做)。但是,有视力的用户可以通过快速浏览整个页面来看到焦点位置(假设你有一个焦点指示器,2.4.7),相对于页面的其余部分,他们会立刻知道焦点位置之前有导航元素,在焦点位置之后还有更多的内容可以交互。
对于使用放大镜的低视力用户,他们的视口将被移动以包括具有焦点的元素。通常当页面加载时,焦点会转移到DOM中第一个可以接收焦点的元素。这通常是位于左上方的“主页”标志(用于LTR语言)。由于视口在左上角,低视力用户将知道他们可以将视口向右或向下拖动以探索页面的更多内容。但是,如果初始焦点位于页面的中间,那可能会让人迷失方向。用户可能不知道自己在页面上的位置。视口从左上角移动了多远?他们能向上、下、左、右探索多远吗?
对于极低视力、视力障碍或盲人使用屏幕阅读器的用户来说,迷失方向甚至更加剧烈。屏幕阅读软件具有出色的导航工具,因此可以轻松地探索页面的各种元素,前提是使用了语义化的HTML元素,例如<h2>或<table>或<ul>。您可以使用“H”键导航到标题,使用“T”键导航到表格,使用“L”键导航到列表。但是,屏幕阅读器用户也希望初始焦点在左上角。他们当然可以定位自己并弄清楚他们在页面上的位置,但这确实需要一些认知努力,类似于屏幕放大镜用户。
那么,如何为所有这些类型的用户(以及许多其他类型的用户)创造愉快的体验呢?
如一篇答案所述,"跳转链接"非常方便。在无障碍术语中,这被称为"越过块"(2.4.1)。它们允许默认焦点位于左上角(或默认焦点所在的任何位置),当您使用tab时,焦点移动到“跳转链接”,这是一个页面内的链接,可让您跳转到页面的主要部分。这对于仅使用键盘的用户(可能是有视力或视力障碍的用户)、屏幕放大器用户和屏幕阅读器用户非常有用。
但是,如果您真的希望焦点集中在特定元素上,如果该元素是<input>或<button>元素,则可以使用autofocus属性。对于其他本地可聚焦元素,例如<a>,您可以使用在加载时运行的JavaScript调用focus()来设置焦点。
页面上的初始焦点不必位于第一个元素,因此将其放在表单上是可以的,只要以减少对有限视力或无法使用鼠标的用户的混淆方式进行即可。
有关tabindex的更多信息,请参见"5.5组件之间的键盘导航(选项卡序列)"。请注意,对于大于0的tabindex值,它说:

"作者强烈建议不要使用这些值。"


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接