Tabindex容器元素上的顺序

Question

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

还是我可以拥有所有链接tabindex="0"，然后tabindex="0"在“右列”和“左列” tabindex="1"上进行设置，以便首先通过“右列”显示用户标签？

我不太确定嵌套制表的工作方式。我在http://jsfiddle.net/fhzjf4yg/上尝试了一个示例，但似乎无法理解它如何遍历选项卡索引。如果有人可以解释订购的工作原理，那也将有所帮助！

Answer 1

查看此处如何解释tabindex（使用tabindex-Web基础知识）。从链接：

tabindex =“ 0”：将元素插入自然制表符顺序。

tabindex =“-1”：从自然制表符顺序中删除一个元素，但是仍然可以通过调用它的focus（）方法来使该元素聚焦。

tabindex =“ 5”：任何大于0的tabindex都会将该元素跳到自然制表符顺序的前面。

最重要的是：

使用大于0的tabindex被认为是反模式。

基本上，如果您想从第二个列表开始，则可以在其中分配元素的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"> 制表时将首先选择，因为它建立了不同的顺序。

如果以这种方式分配它们，则将完全相同：

<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顺序中取出来是因为它完全为所有类型的鼠标用户和键盘用户创建了不同的体验。