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

时间:2019-02-08 07:08:33

标签: accessibility tabindex

我的表单中有多个元素,所有元素的tabindex都为1。 它应该如何表现? 多个具有相同的正tabindex值的元素的行为是什么?

2 个答案:

答案 0 :(得分:1)

  

一个正值表示该元素在顺序键盘导航中应该是可聚焦的,其顺序由数字的值定义。也就是说,tabindex =“ 4”将集中在tabindex =“ 5”之前,但在tabindex =“ 3”之后。如果多个元素共享相同的正tabindex值,则它们相对的顺序将遵循它们在文档源中的位置。

应该指出的是,除非绝对必要和期望,否则应避免使用tabindex。表单元素默认情况下应遵循文档的自然流程(交互元素具有自然的制表符顺序)。在表单项上指定tabindex将覆盖默认值,并可能导致严重的混乱和技术负担。上面提到的mozilla页面包含有关此内容的更多信息。

答案 1 :(得分:1)

所有具有相同tabindex值的元素都被分组在一起,并且它们集中到该组中的顺序与自然制表顺序相同。对于英语,法语,德语等“从左到右”(LTR)语言,顺序为从左到右,从上到下。对于RTL语言(例如阿拉伯语或希伯来语),制表符顺序是从右到左(尽管仍然是从上到下)。

具有最小 tabindex(1)的元素被导航到第一个,然后导航到下一个最小的tabindex(2),依此类推,直到没有{{1} }值保留下来,然后将自然可聚焦的元素制表到(例如链接,按钮等)。

例如:

tabindex
  • 带有<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> 的元素将首先被关注。它们有两个,B和G。由于B在DOM中位于G之前,因此B首先被关注,然后是G。
  • 接下来将重点关注带有tabindex="1"的元素。有两个,C和F。由于C在DOM中位于F之前,因此C紧随其后,然后是F。
  • 接下来将重点关注带有tabindex="2"的元素。其中有两个D和E。由于DOM在DOM中位于D之前,因此D紧随其后,然后是E。
  • tabindex="3"中没有其他元素,因此接下来将重点讨论其他所有内容。然后是H。

因此完整的制表符顺序为B,G,C,F,D,E,A,H

这是一个极端的例子,但显示了顺序。您可以在tabindex规范的“ Safe Args”下找到所有信息

但是,如果可能,请不要使用大于零的tabindex值。 If the value is greater than zero说:

  

警告!
使用tabindex的正值来指定元素在顺序焦点导航顺序中的位置会与所有可聚焦元素的顺序互动。它易于出错,因此不建议使用。作者通常应保留元素以其默认顺序显示。