html - 容器元素的 Tabindex 顺序

Question

假设我有两列(左列和右列)。每列包含链接。 如果我希望用户首先进入右列链接，那么右列中的所有链接都必须是 tabindex="0" 并且左列中的所有链接都必须是 tabindex="1"？

或者我可以让所有链接都有 tabindex="0"，然后在右列上设置 tabindex="0" 和 tabindex="1" 在左列上让用户选项卡首先通过右列？

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

Answer 1

看看这里如何解释 tabindex ( Using tabindex - Web fundamentals )。来自链接:

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，它会按照你尝试的顺序进行选择。

例子:

<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 键时首先被选中，因为它建立了不同的顺序。

如果你这样赋值，结果是一样的:

<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 并不是真正的好方法。

编辑:按照您的建议让屏幕阅读器阅读的另一种方法是使用 CSS 以可视方式重新排列 DOM 顺序。您可以按照您想要阅读的顺序使用标记，并以不同的顺序显示它。使用 flexbox 你可以使用 flex-direction: row-reverse在你的情况下或简单地使用 order: 1;在您要阅读的第一个盒子上和order: 2;在第二个盒子上。

从 DOM 顺序中取出内容是不可访问的，因为它为所有类型的鼠标用户和键盘用户创造了完全不同的体验。