tabindex

基线 广泛可用

此功能已得到良好建立,并在许多设备和浏览器版本中运行良好。它自 2018 年 10 月.

报告反馈

试一试

tabindex 全局属性 允许开发者使 HTML 元素可聚焦,允许或阻止它们按顺序可聚焦(通常使用 Tab 键,因此得名),并确定它们按顺序聚焦导航的相对顺序。

它接受一个整数作为值,根据整数的值产生不同的结果。

  • 负值(确切的负值实际上并不重要,通常是 tabindex="-1")表示该元素无法通过顺序键盘导航访问。

    注意:tabindex="-1" 可能对那些不应使用 Tab 键直接导航,但需要将键盘焦点设置为它们的元素有用。例如,一个屏幕外模态窗口,当它进入视图时应该被聚焦,或者一个当错误的表单提交时应该立即被聚焦的表单提交错误消息。

  • tabindex="0" 表示该元素在顺序键盘导航中应该是可聚焦的,在任何正的 tabindex 值之后。这些元素的焦点导航顺序由它们在文档源中的顺序定义。
  • 正值 表示该元素应该在顺序键盘导航中是可聚焦的,其顺序由数字的值定义。也就是说,tabindex="4"tabindex="5"tabindex="0" 之前聚焦,但在 tabindex="3" 之后聚焦。如果多个元素共享相同的正 tabindex 值,它们彼此之间的顺序遵循它们在文档源中的位置。tabindex 的最大值为 32767。
  • 如果 tabindex 属性包含,但没有设置值,那么元素是否可聚焦由用户代理决定。

    警告:建议您仅使用 0-1 作为 tabindex 值。避免使用大于 0tabindex 值和可以更改可聚焦 HTML 元素顺序的 CSS 属性(Ordering flex items)。这样做会使依赖键盘导航或辅助技术的使用者难以导航和操作页面内容。相反,请按照逻辑顺序编写文档中的元素。

一些可聚焦的 HTML 元素默认情况下具有 0tabindex 值,由 用户代理 在后台设置。这些元素是具有 href 属性的 <a><area><button><frame> 已弃用 <iframe><input><object><select><textarea>,以及 SVG <a> 元素,或者为 <details> 元素提供摘要的 <summary> 元素。开发人员不应该在这些元素中添加 tabindex 属性,除非它改变了默认行为(例如,包括一个负值将从焦点导航顺序中删除该元素)。

警告:tabindex 属性不能用于 <dialog> 元素。

无障碍问题

避免将 tabindex 属性与非 交互式内容 结合使用,以使旨在进行交互的内容可以通过键盘输入来聚焦。例如,使用 <div> 元素来描述按钮,而不是使用 <button> 元素。

使用非交互式元素创作的交互式组件未列在 辅助功能树 中。这会阻止辅助技术能够导航到这些组件并操作它们。内容应该使用交互式元素(<a><button><details><input><select><textarea> 等)进行语义描述。这些元素具有内置的角色和状态,这些角色和状态向辅助功能传达状态,否则必须通过 ARIA 管理。

规范

规范
HTML 标准
# attr-tabindex

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅