使用 tabindex 控制焦点

使用集合保持井井有条 根据您的偏好保存内容并对其进行分类。

Rob Dodson

Alexandra Klepper

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

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

什么是 tabindex？

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

tabindex 可以应用于任何元素，但它应该只应用于交互式元素，并且采用一系列整数值。使用 tabindex，您可以为可聚焦页面元素指定显式顺序，将原本不可聚焦的元素插入标签页顺序，并从标签页顺序中删除元素。例如

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

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

tabindex="5"：任何大于 0 的 tabindex 都会将该元素带到自然标签页顺序的前面。如果有多个元素的 tabindex 大于 0，则标签页顺序从大于零的最小值开始，并向上递增。使用大于 0 的 tabindex 被认为是反模式。

确保控件具有键盘无障碍功能

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

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

管理页面级别的焦点

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

在这种情况下，请识别选定的内容区域，并为其指定 -1 的 tabindex 并调用其 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 值而位于标签页顺序中，它们将保留在标签页顺序中。要从标签页顺序中删除元素及其所有子元素，请考虑使用 WICG 的 inert polyfill。该 polyfill 模拟了提议的 inert 属性的行为，该属性阻止辅助技术选择或读取元素。

避免 tabindex > 0

任何大于 0 的 tabindex 都会将元素跳转到自然标签页顺序的前面。如果有多个元素的 tabindex 大于 0，则标签页顺序从大于零的最小值开始，并向上递增。

使用大于 0 的 tabindex 被认为是反模式，因为屏幕阅读器按照 DOM 顺序而不是标签页顺序导航页面。如果您需要元素在标签页顺序中提前出现，则应将其移动到 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》。本指南列出了常见的 UI 模式，并确定了您的组件应支持哪些键。