tabindex 的行为不符合预期。我做错了什么？

Question

我通常不会弄乱 Tab 键顺序，但我有一个使用 LeafletJS 的地图应用程序，并且不希望仅使用键盘的用户在到达图例之前必须通过 tabindex="0" 来浏览一百多个标记引脚按钮将向他们显示标记引脚的含义并允许他们按类别进行过滤。

MDN 表示，“正值意味着该元素应该在顺序键盘导航中可聚焦，其顺序由数字值定义。也就是说，tabindex =“4”在 tabindex =“5”之前获得焦点，并且tabindex="0"，但在 tabindex="3" 之后。如果多个元素共享相同的正 tabindex 值，则它们相对于彼此的顺序遵循它们在文档源中的位置。" 因此，我在复选框上的按钮和 tabindex="2"。

但是，在 Windows 10 上的 Firefox、Chrome、Opera 和 Edge 中，您可以通过 Tab 键浏览所有标记引脚、各种浏览器控件，然后才返回到 tabindex="1" 的按钮以及 tabindex="2" 和 a 的复选框。链接 tabindex="3"

您可以在此处查看地图演示 https://codepen.io/PeterNotInPT/pen/eYXdxdP 但我可以在下面以更简单的形式重现该问题，也可以在 Codepen 上重现该问题 https://codepen.io/ PeterNotInPT/笔/LYvbjxP

<a href="#">Link where tabindex is NOT set</a><br><br>
<button tabindex="0">Button with tabindex: 0</button><br><br>
<a href="#" tabindex="3">Link with tabindex: 3</a><br><br>
<button tabindex="1">Button with tabindex: 1</button><br><br>
<a href="#" tabindex="4">Link with tabindex: 4</a><br><br>
<input type="checkbox" id="chkbox" tabindex="2" value="abc"><label for="chkbox">Label for checkbox with tabindex: 2</input>

理论上，焦点应该跳转到 tabindex="1" 的按钮、tabindex="2" 的复选框以及 tabindex="3" 和 tabindex="4" 的两个链接，但实际上它会跳转到没有设置tabindex，tabindex=“0”的按钮，浏览器控制然后返回到tabindex=“1”的按钮。

我不明白什么？或者我的电脑上有什么奇怪的东西，但它按你的预期工作？

Answer 1

您所观察到的情况是完全正常的。 事实上，这是一种众所周知的行为：

1. 没有 tabindex 或 tabindex=0 的元素按照 DOM 顺序聚焦
2. 然后 tabindex>=1 的元素将按照 tabindex 顺序聚焦，或者对于具有相同值的 tabindex 则按照 DOM 顺序聚焦

这就是tabindex的大问题。 如果您在任何地方指定不同于 -1 或 0 的单个值，那么 您必须为页面的所有可聚焦元素指定 tabindex，以确保焦点顺序在各处保持一致。

当您必须到处指定 tabindex 时，特别是当内容动态变化时，要始终管理一致的焦点顺序是非常困难的。这是维护的噩梦。

这就是为什么使用任何不同于 -1 或 0 的 tabindex 值，虽然有效，但通常强烈建议不要使用。

在您的情况下，最好重新排列元素，而不是使用 tabindex>=1。

提醒一下，值 0 和 -1 是特殊的：

• 值 0 使元素可以按 DOM 顺序获得焦点，即使通常情况下不是这样。
• 值 -1 使元素不可聚焦，尽管通常应该如此。该元素只能以编程方式获得焦点。