HTML | tabindex 属性

在 HTML 中，tabindex 属性可以指定一个元素在 Tab 键（Tab 键是键盘上的一个按键，用于让焦点在可输入元素之间切换）顺序中的顺序，从而让用户在通过 Tab 键切换焦点时按照你指定的顺序来切换。

语法

tabindex 属性的基本语法如下：

<element tabindex="integer">

其中的 integer 是一个整数，表示当前元素在 Tab 键顺序中的顺序。

tabindex 的取值

取值为负数的 tabindex 表示是可以通过 Tab 键聚焦到的，但是它们的顺序是在默认顺序之前的。如果 tabindex 值相等，则按照它们在 HTML 中出现的顺序排序，相同 tabindex 的元素，将以流程顺序进行聚焦。

如果没有了 tabindex，则元素将相对于其他拥有 tabindex 属性的元素在默认顺序中聚焦。如果一个元素及其父元素都没有 tabindex 属性，那么该元素相对于那些具有 tabindex 属性的元素来说默认排在最后。

使用 tabindex 的注意事项

• 使用 tabindex 时建议要遵循默认的键盘导航顺序，因为这会让用户更加方便地使用键盘导航。

• 避免使用 tabindex 来决定被点击聚焦的顺序，因为这可能会使无障碍较差的用户感到困扰。

• 不要使用 tabindex "0" 来试图解决可点击元素无法聚焦的问题。相反，应该使用正确的 HTML 元素类型和属性。

示例

以下示例演示如何将 tabindex 属性应用于一个 input 元素和一个按钮：

<label>
  Name:
  <input type="text" name="name" tabindex="1">
</label>

<button type="submit" tabindex="2">Submit</button>

结论

tabindex 属性是一个很有用的工具，可以帮助我们为网页的可访问性做出贡献。但是，它应该谨慎使用，因为它可以使网页对某些无障碍用户产生困扰。只要使用合理，就可以让 tabindex 成为你网页设计的一项非常实用的工具。