Html tab容器元素上的索引顺序

假设我有两列（左和右）。每列都包含链接。 如果我想让用户先点击右栏链接，那么右栏中的所有链接都必须是

tabindex=“0”

，而左栏中的所有链接都必须是

tabindex=“1”

或者我可以让所有链接都有

tabindex=“0”

，然后在右栏设置

tabindex=“0”

，在左栏设置

tabindex=“1”

，让用户选项卡先通过右栏

我不太清楚嵌套选项卡是如何工作的。

---

我尝试了一个示例，但似乎不理解它是如何遍历选项卡索引的。如果有人能解释一下订单是如何运作的，那也会有帮助

回答不正确，对不起

一个页面上不能有多个tabindex=“0”，这意味着它应该是唯一的。如果我告诉您转到tabindex=“0”，页面上有两个，您会去哪里

---

基本上没有嵌套，从0跳到1再跳到2，依此类推

看看这里如何解释tabindex（）。从链接：

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="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

，或者只需使用

顺序：1并
顺序：2在第二个框中

从DOM顺序中取出内容是不可访问的，因为它为鼠标用户和所有类型的键盘用户创造了完全不同的体验。
@molda的答案标记为-2（截至今天查看），但标记为正确答案。不确定是怎么回事，但他的回答中有几个错误的评论

一个页面上不应该有多个tabindex=“0”

您可以拥有任意数量的
tabindex=“0”
。它只是将元素插入到自然选项卡顺序中。但是，您应该只在已经不在制表符顺序中的元素上使用它（您不需要在其他元素上使用它）
你能在JSFIDLE中解释一下为什么它会首先跳转到“Google”链接周围的div容器，即使该容器有
tabindex=“1”
？实际上整个答案中没有什么是正确的，它是100%错误的。要让@ChaBukuBakkes的响应更深入一点：
tabindex=“0”
是一个完全好的回答（实际上是唯一可行的）告诉浏览器一个元素应该可以通过选项卡访问的方法。Zero在一个不可能访问的元素（例如容器）上激活选项卡导航浏览器将简单地使用视觉流将其置于正确的位置。正值覆盖默认的选项卡流，并且可能不是实际需要的。答案也很可靠。+1关于RTL语言的更多信息，我甚至不知道。这不是一个新问题，但OP可能还没有看到。我发现了这个问题当我搜索并意识到这个被接受的答案是错误的，我通常不会对老问题发表评论，但它是如此明显的错误以至于很难不说什么
<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>