时间戳

首页 > 解决方案 > 多个元素共享相同的正 tabindex 值？

accessibility - 多个元素共享相同的正 tabindex 值？

问题描述

我的表单中有多个元素，所有的 tabindex 都为 1.... 它应该如何表现？共享相同正 tabindex 值的多个元素的行为应该是什么......？

标签： accessibilitytabindex

解决方案

具有相同tabindex值的所有元素都被分组在一起，并且它们在该组中的焦点顺序与自然跳格顺序相同。对于“从左到右”(LTR) 语言，例如英语、法语、德语等，顺序是从左到右和从上到下。对于 RTL 语言，例如阿拉伯语或希伯来语，Tab 顺序是从右到左（尽管仍然是从上到下）。

具有最小正数 tabindex(1) 的元素首先被导航到，然后是下一个最小的tabindex(2) 等，直到没有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>
  • 元素tabindex="1"将首先聚焦。其中有两个，B 和 G。由于在 DOM 中 B 在 G 之前，因此 B 先聚焦，然后 G。
  • tabindex="2"接下来将重点关注具有 的元素。其中有两个，C 和 F。由于 C 在 DOM 中位于 F 之前，因此 C 是下一个焦点，然后是 F。
  • tabindex="3"接下来将重点关注具有 的元素。其中有两个，D 和 E。由于在 DOM 中 D 出现在 E 之前，因此 D 是下一个焦点，然后是 E。
  • 没有更多的元素，tabindex因此接下来将关注其他所有内容。A 然后 H。

所以完整的 Tab 键顺序是 B、G、C、F、D、E、A、H

这是一个极端的例子，但显示了顺序。您可以在“如果值大于零”tabindex下找到规范中的所有信息

但是，如果可能，不要使用tabindex大于零的值。规范说：

警告！
使用 tabindex 的正值来指定元素在顺序焦点导航顺序中的位置与所有可聚焦元素的顺序交互。它容易出错，因此不推荐。作者通常应该让元素以默认顺序出现。

推荐阅读