容器元素的 Tabindex 顺序

Question

假设我有两列（左列和右列）。每列包含链接。如果我希望用户首先进入右列链接，右列中的所有链接都必须是 tabindex="0"，而左列中的所有链接都必须是 tabindex="1" 吗？

或者我是否可以让所有链接都具有 tabindex="0"，然后在右栏上设置 tabindex="0" 并在左栏上设置 tabindex="1"，以便让用户选项卡先通过右栏？

我不太清楚嵌套制表符是如何工作的。我在 http://jsfiddle.net/fhzjf4yg/ 上尝试了一个例子，但我似乎无法理解它是如何遍历选项卡索引的。如果有人可以解释排序的工作原理，那也会有所帮助！

Answer 1

不正确的答案，抱歉

一个页面上不应有多个 tabindex="0"，这意味着它应该是唯一的。如果我告诉你去 tabindex="0" 而页面上有两个，你会去哪里？

而且没有嵌套，你基本上从 0 跳到 1 再到 2 等等

Answer 2

看看这里是如何解释tabindex的(Using tabindex - Web fundamentals)。来自 link:

tabindex="0": Inserts an element into the natural tab order.

tabindex="-1": Removes an element from the natural tab order, but the element can still be focused by calling its focus() method

tabindex="5": Any tabindex greater than 0 jumps the element to the front of the natural tab order.

最重要的是：

Using a tabindex greater than 0 is considered an anti-pattern.

基本上，如果你想从第二个列表开始，你可以为其中的元素分配一个 tabindex 为 1 并让其余元素没有 tabindex，它将 select 按照你尝试的顺序去做。

示例：

<div id="element1">First No tab index</div>
<div id="element2">Second No tab index</div>
<div id="element3" tabindex="1">Third: has tab index</div>

<div id="element3" tabindex="1"> 将在 Tab 键时首先被 select 编辑，因为它建立了不同的顺序。

如果你这样赋值就完全一样了:

<div id="element1" tabindex="0">First No tab index</div>
<div id="element2" tabindex="0">Second No tab index</div>
<div id="element3" tabindex="1">Third: has tab index</div>

在我读到的多个地方都建议使用大于 0 的 tabindex 并不是一个好的方法。

编辑：另一种让屏幕 reader 阅读您所建议的方法是使用 CSS 重新排列 DOM 视觉顺序。您可以按照您想要阅读的顺序使用标记，并以不同的顺序显示它。使用 flexbox，您可以在您的情况下使用 flex-direction: row-reverse，或者只需在您要阅读的第一个框上使用 order: 1;，在第二个框上使用 order: 2;。

从 DOM 订单中取出东西是不可访问的，因为它为所有类型的鼠标用户与键盘用户创造了完全不同的体验。

Answer 3

@molda 的答案被标记为 -2（截至今天查看），但被标记为正确答案。不知道这是怎么回事，但他的回答中有几个错误的评论。

You shouldn't have more than one tabindex="0" on a page

tabindex="0" 数量不限。它只是将元素插入到自然跳格顺序中。但是，您应该只在已经不自然地按 Tab 键顺序排列的元素上需要它（您不需要在上使用它），并且它应该只在将要交互的元素上设置。随机设置它

是不好的。

If i told you to go to tabindex="0" and there were two on the page, where would you go?

焦点将转到由 DOM 控制的 Tab 序列中的下一个自然元素。

(from comment section) If there's more than one tabindex with same index it just cares about the first one and ignores the rest

这显然是错误的。具有相同正 tabindex 的所有元素将被组合在一起，它们获得焦点的顺序将是 DOM 顺序。它们都会先循环，然后再循环下一组下一个最低（正）的tabindex。

@chabuku 的回答更准确，关于 tabindex 的定义和使用 tabindex > 0 时的反模式警告。如果你使用 tabindex > 0，你几乎总是会破坏键盘的可访问性。不要不做。

如果您有两列链接并希望您的标签向后移动，您真的需要考虑页面的设计以及它如何影响用户体验。对于 LTR（从左到右）语言，例如英语和罗曼语，自然的 Tab 键顺序应该是从左到右，然后是从上到下。如果你强制它在右列然后在左列，那可能会非常混乱。

对于 RTL 语言（阿拉伯语、希伯来语、波斯语等），跳格顺序是从右到左。浏览器会自动为您处理。如果您尝试强制执行特定的 Tab 键顺序，那么您可能会破坏 RTL 语言支持。

如果您确实需要右列首先获得焦点，则使用 CSS 将右列向右移动，但将右列先 DOM。像这样：

<style>
  div {border: 1px black solid; display: inline;}
</style>

<!-- column on the right but receives focus first -->
<div style="float:right">
  <a href="blah">a</a>
  <a href="blah">b</a>
  <a href="blah">c</a>
</div>

<!-- column on the left but receives focus second -->
<div>
  <a href="blah">d</a>
  <a href="blah">e</a>
  <a href="blah">f</a>
</div>

容器元素的 Tabindex 顺序

Tabindex order on container element

html

accessibility