【发布时间】：2019-01-21 22:58:41
【问题描述】：
我在我目前正在处理的代码库中多次注意到以下模式：
<button tabindex="0">A button</button>
<ul tabindex="-1">...
当然，ul 上的tabindex="-1" 会阻止焦点，但是在按钮上设置tabindex=0 有什么意义呢？默认情况下，这个元素不是已经可以聚焦了吗？
【问题讨论】：
【发布时间】：2019-01-21 22:58:41
【问题描述】：
tabindex 的两种用法都是多余的。
【讨论】：
-
同意 - 但是：tabindex="-1" 基本上是说：“不能用 tab 聚焦，但是 JavaScript（或其他脚本）可以聚焦这个。”
-
@TimB，是的，在某些情况下您应该使用
tabindex="-1"，但一般来说，您不希望将焦点（通过 javascript 以编程方式）放在不可操作/不可交互的元素上.这让屏幕阅读器用户感到困惑。焦点已移至一个元素，但他们无法选择它。跳过链接（WCAG 2.4.1 绕过块）是一个例外。如果屏幕阅读器用户或键盘用户选择跳过链接，则焦点通常会移动到标题或其他元素。 -
同意。但通常，除非您不进行自定义实现，否则您不必在跳过链接目标上使用 tabindex="-1"，因为它适用于大多数浏览器。 IE 是个例外。
只是详细说明一下 tabindex 的使用以及它在这种情况下的含义：
Tabindex="0" 表示：可通过 tab 键和来自脚本（使用 element.focus()）聚焦，并插入自然 taborder（也就是逻辑上遵循 DOM 的顺序）。由于这是按钮的默认行为，您可以将 <button tabindex="0"> 视为废话和膨胀代码。
大于 0 的 Tabindex 分配自定义 taborder。因此，如果您说<button tabindex="1">，则无论 DOM 结构如何，在使用选项卡时按钮总是会首先获得焦点。不鼓励使用此方法。
Tabindex="-1" 表示您不能使用选项卡将其聚焦，但 JavaScript element.focus() 函数将起作用。在ul 上，这只有在您想在某个时候从脚本中集中注意力时才有意义。否则这也是膨胀代码，并且还分配了一个意想不到的角色。
【讨论】：