Question

我们说我有两列（左和右）。每列包含链接。如果我希望用户首先在右列中添加标签链接，则右列中的所有链接都必须为tabindex="0"，而左列中的所有链接都必须为tabindex="1"？

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

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

Answer 1

看的tabindex是如何说明如下（Using tabindex - Web fundamentals）。从链接：

的tabindex = “0”：将元素插入自然标签顺序

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

的tabindex =“5”：任何的tabindex大于0跳元件自然标签顺序的前

最重要的是：

使用大于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并不是真正的好方法，但是在像您这样的情况下完全有必要使用它们。

Answer 2

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

您不应该有多于一个的tabindex =“0”的网页上

您可以有很多tabindex="0"，只要你想。它只是插入元素融入自然tab顺序。然而，你应该只需要它自然不在Tab键顺序已经（你不需要它一个），它应该只将互动元素上设置的元素。将其设置在随机的

上是不好的。

如果我告诉你去tabindex =“ 0”并且页面上有两个，那你会去哪里？

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

（来自评论部分）如果有多于一个的tabindex与相同索引它只是第一个关心和忽略其余部分

那是公然的错误。与同样积极的tabIndex所有元素将被组合在一起，并命令他们接收焦点将是DOM顺序。它们将首先循环遍历，然后再循环遍历下一个最低（正）tabindex的下一组。

@ chabuku的回答更准确，关于定义tabindex和反模式的警告当使用的tabIndex> 0后，几乎总是打破键盘辅助功能，如果你使用的tabIndex> 0不要做吧。

如果您有链接两列，并希望自己的黏合往回走，你真的真的需要考虑一下页面的设计以及它如何影响用户体验。对于LTR（从左到右）语言，例如英语和浪漫语言，自然制表符顺序应从左到右，然后从上到下。如果将其强制设置为右列然后左列，则可能会造成混乱。

对于RTL语言（阿拉伯语，希伯来语，波斯语等），制表顺序为从右到左。浏览器会自动为您处理。如果你试图迫使一定的Tab键顺序，那么你可能会打破RTL语言支持。

如果您确实需要右列来首先获得焦点，请使用CSS将右列移到右侧，但将右列放在 first 中。像这样：

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

答案 2 :(得分：-2)

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

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

Answer 3

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

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

容器元素上的Tabindex顺序

3 个答案: