多个元素共享相同的正tabIndex值?

问题描述 投票:0回答:2

我在我的形式多种元素,具有tabindex属性为1对所有....应该如何表现?什么应该是多个元素共享相同的正tabIndex值的行为......?

accessibility tabindex
2个回答
1
投票

正值意味着元素应该是在顺序键盘导航可聚焦的,以其顺序由数的值来定义。也就是说,的tabindex = “4” 将被的tabindex之前= “5”,但之后的tabindex = “3” 聚焦。如果多个元素共享相同的正tabIndex值,其相对于彼此的顺序遵循其在文档源位置。

应当提及的,使用的tabindex应该避免,除非它是绝对必要和预期。表单元素应遵循缺省文档的自然流动(交互式元件具有天然标签顺序)。上表单项指定tabindex属性将覆盖默认,并可能导致大混乱和技术债务。上面提到Mozilla的网页包含更多相关信息。


1
投票

具有相同的值tabindex所有元素被组合在一起,它们被聚焦到该组中的顺序是一样的自然跳位顺序。对于“左到右”(LTR)的语言,如英语,法语,德语等,顺序是从左到右,从上到下。对于RTL语言,如阿拉伯或希伯来语,Tab键顺序是从右到左(虽然仍然从上到下)。

具有最小正tabindex(1)的元件被导航到第一,那么下一个最小tabindex(2),等等,直到没有tabindex值为left,然后自然可聚焦元件将转到(例如,链接,按钮等)。

例如:

<a href="...">a</a>
<a href="..." tabindex="1">b</a>
<a href="..." tabindex="2">c</a>
<a href="..." tabindex="3">d</a>
<a href="..." tabindex="3">e</a>
<a href="..." tabindex="2">f</a>
<a href="..." tabindex="1">g</a>
<a href="...">h</a>
  • tabindex="1"的元素会首先集中。有其中的两个,B和G.由于B来在DOMģ之前,B的重点是第一和然后G.
  • tabindex="2"的元素将被下一个重点。有两个人,C和F由于C提供的F的DOM之前,C的重点是下一个,然后F.
  • tabindex="3"的元素将被下一个重点。有两个人,d和E.由于d来鄂中DOM之前,d是下一个,然后集中E.
  • 有没有更多的元素与tabindex所以其余的都集中旁边。 A然后H.

所以全标签顺序是B,G,C,F,d,E,A,H

这是一个极端的例子,但显示的顺序。您可以在“tabindex”发现在If the value is greater than zero规范的所有信息

然而,如果可能的话,不要使用tabindex是大于零值。该spec说:

警告! 使用的tabindex正值指定元素在连续焦点导航顺序中的位置与所有可聚焦元素的顺序进行交互。这是容易出错,因此不推荐使用。作者通常应该离开元素出现在它们的默认顺序。

© www.soinside.com 2019 - 2024. All rights reserved.