使用 tabindex 控制焦点

Rob Dodson

Alexandra Klepper

<button> 或 <input> 等标准 HTML 元素内置了键盘无障碍功能，应尽可能使用这些元素。不过，如果您需要构建自定义互动元素，可以通过添加 tabindex 来创建预期的用户行为。

仅向互动内容添加 tabindex。即使内容很重要（例如关键图片），屏幕阅读器用户也可以在不添加焦点的情况下理解该内容。

什么是 tabindex？

如果您需要修改内置元素提供的默认标签页顺序，可以使用 tabindex HTML 属性显式设置元素的标签页位置。

tabindex 可应用于任何元素，但应仅应用于互动元素，并且采用一系列整数值。借助 tabindex，您可以为可聚焦的网页元素指定明确的顺序，将原本无法聚焦的元素插入到 Tab 键顺序中，以及从 Tab 键顺序中移除元素。例如：

tabindex="0"：将元素插入到自然标签页顺序中。可以通过按 Tab 键聚焦元素，也可以通过调用元素的 focus() 方法聚焦元素。

tabindex="-1"：从自然标签页顺序中移除元素，但仍可通过调用元素的 focus() 方法来聚焦该元素

tabindex="5"：任何大于 0 的 tabindex 都会将相应元素置于自然 Tab 顺序的前面。如果有多个元素的 tabindex 大于 0，则 Tab 键顺序从大于零的最低值开始，然后逐渐增大。使用大于 0 的 tabindex 被视为反模式。

确保控件可通过键盘访问

Lighthouse 等工具非常擅长自动检测某些无障碍功能问题，但有些测试仍必须由人工手动完成。

尝试按 Tab 键浏览您的网站。您是否能够访问页面上的所有互动控件？如果不是，您可能需要使用 tabindex 来提高这些控件的可聚焦性。

在页面级管理焦点

有时，tabindex有助于打造顺畅的用户体验。例如，如果您构建了一个包含不同内容部分的强大的单页应用，其中一些内容在网页加载的不同时间点处于隐藏状态。这可能意味着导航链接会更改可见内容，而无需刷新网页。

在这种情况下，请确定所选内容区域并为其指定 tabindex（值为 -1），然后调用其 focus 方法。这样可确保内容不会出现在自然标签页顺序中。这种称为管理焦点的技术可让用户感知到的上下文与网站的视觉内容保持同步。

管理组件中的焦点

在某些情况下，您还必须在控件级别管理焦点，例如使用自定义元素。

您可能很难确定要实现哪些键盘行为。无障碍富互联网应用 (ARIA) 创作实践指南列出了组件类型以及它们支持的键盘操作类型。

将元素插入到标签页顺序中

使用 tabindex="0" 将元素插入到自然标签页顺序中。例如：

<div tabindex="0">Focus me with the TAB key</div>

如需聚焦某个元素，请按 Tab 键或调用该元素的 focus() 方法。

从标签页顺序中移除元素

使用 tabindex="-1" 移除元素。例如：

<button tabindex="-1">Can't reach me with the TAB key!</button>

这会从自然标签页顺序中移除某个元素，但仍可通过调用该元素的 focus() 方法来聚焦该元素。

将 tabindex="-1" 应用于某个元素不会影响其子元素；如果子元素自然地或因 tabindex 值而位于 Tab 键顺序中，则它们将保留在 Tab 键顺序中。如需从标签页顺序中移除某个元素及其所有子元素，请考虑使用 WICG 的 inert polyfill。该填充区会模拟提议的 inert 属性的行为，该属性可防止辅助技术选择或读取元素。

避免使用 tabindex > 0

任何大于 0 的 tabindex 都会使元素跳到自然 Tab 顺序的前面。如果有多个元素的 tabindex 大于 0，则标签页顺序从大于零的最低值开始，然后逐渐增大。

使用大于 0 的 tabindex 被视为反模式，因为屏幕阅读器会按 DOM 顺序（而非 Tab 键顺序）浏览网页。如果您需要某个元素在标签页顺序中更早出现，则应将其移至 DOM 中更早的位置。

借助 Lighthouse，您可以识别 tabindex > 0 的元素。运行无障碍审核（Lighthouse > 选项 > 无障碍），然后查看“所有元素的 [tabindex] 值都不大于 0”审核的结果。

使用“漫游 tabindex”

如果您要构建复杂的组件，可能需要添加除焦点之外的其他键盘支持。如果可能，请使用内置的 select 元素。它可聚焦，并允许使用箭头键显示其他可选择的选项。

如需在自己的组件中实现类似的功能，您可以使用一种称为“漫游 tabindex”的技术。漫游 tabindex 的工作原理是，将除当前活跃子项之外的所有子项的 tabindex 设置为 -1。然后，该组件使用键盘事件监听器来确定用户按下了哪个键。

发生这种情况时，组件会将之前获得焦点的子级的 tabindex 设置为 -1，将即将获得焦点的子级的 tabindex 设置为 0，并对其调用 focus() 方法。

之前

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

之后

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

键盘操作方法

如果您不确定自定义组件可能需要什么级别的键盘支持，可以参阅 ARIA 创作实践 1.1。 本指南列出了常见的界面模式，并指明了组件应支持哪些键。