HTML tabindex 全局属性

试一试

<p>Click anywhere in this pane, then try tabbing through the elements.</p>

<label>First in tab order:<input type="text" /></label>

<div tabindex="0">Tabbable due to tabindex.</div>

<div>Not tabbable: no tabindex.</div>

<label>Third in tab order:<input type="text" /></label>

p {
  font-style: italic;
  font-weight: bold;
}

div,
label {
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

div:focus {
  font-weight: bold;
}

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

• 负值（具体的负值无关紧要，通常为 tabindex="-1"）表示该元素不能通过顺序键盘导航访问。

  注意：tabindex="-1" 对于不应通过 Tab 键直接导航，但需要设置键盘焦点的元素可能很有用。例如，当一个屏幕外的模态窗口出现时应该被聚焦，或者当一个错误的表单提交时，错误消息应该立即被聚焦。

• tabindex="0" 表示该元素应该在任何正 tabindex 值之后，在顺序键盘导航中可聚焦。这些元素的焦点导航顺序由它们在文档源中的顺序决定。

• 正值表示该元素应该在顺序键盘导航中可聚焦，其顺序由数字值决定。也就是说，tabindex="4" 在 tabindex="5" 和 tabindex="0" 之前聚焦，但在 tabindex="3" 之后聚焦。如果多个元素共享相同的正 tabindex 值，则它们之间的相对顺序遵循它们在文档源中的位置。tabindex 的最大值为 32767。

• 如果包含 tabindex 属性但未设置值，则元素是否可聚焦由用户代理决定。

  警告：建议仅使用 0 和 -1 作为 tabindex 值。避免使用大于 0 的 tabindex 值和可以改变可聚焦 HTML 元素顺序的 CSS 属性（弹性项目排序）。这样做会使依赖键盘导航或辅助技术的人难以导航和操作页面内容。相反，请以逻辑顺序编写文档中的元素。

一些可聚焦的 HTML 元素在底层由 用户代理 默认设置 tabindex 值为 0。这些元素包括带有 href 属性的 <a> 或 <area>、<button>、<frame> 已废弃 、<iframe>、<input>、<object>、<select>、<textarea>，以及 SVG <a> 元素，或者为 <details> 元素提供摘要的 <summary> 元素。除非改变默认行为（例如，包含负值将从焦点导航顺序中移除该元素），否则开发者不应向这些元素添加 tabindex 属性。

可访问性考虑

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

使用非交互式元素编写的交互式组件不会列在可访问性树中。这会阻止辅助技术导航和操作这些组件。内容应使用交互式元素（<a>、<button>、<details>、<input>、<select>、<textarea> 等）进行语义描述。这些元素具有内置的角色和状态，可以将状态传达给辅助技术，否则这些状态必须通过 ARIA 进行管理。

• 使用 tabindex 属性 | The Paciello Group

规范

浏览器兼容性

另见

• 所有全局属性
• HTMLElement.tabIndex 反映此属性
• tabindex 的可访问性问题：请参阅 Adrian Roselli 的不要使用大于 0 的 Tabindex
• 阅读顺序