此页面由 Cloud Translation API 翻译。

使用 tabindex 控制焦点

Rob Dodson

Alexandra Klepper

<button> 或 <input> 等标准 HTML 元素支持键盘无障碍功能，应尽可能使用。不过，如果您需要构建自定义互动元素，那么您可以通过以下方式创建预期的用户行为：添加 tabindex。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

请仅向互动式内容添加 tabindex。即使内容重要图片等，屏幕阅读器用户无需添加焦点。

什么是 tabindex？

当您需要修改内置标签页提供的默认标签页顺序时元素，则可以使用 tabindex HTML 属性来明确设置元素制表符的位置。

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

tabindex="0"：在自然 Tab 键顺序中插入元素。该元素可以可通过按 Tab 键聚焦于元素，而可通过调用其 focus() 方法。

tabindex="-1"：从自然 Tab 键顺序中移除某个元素，但该元素仍可通过调用 focus() 方法来获得焦点

tabindex="5"：任何大于 0 的 tabindex 均将该元素置于前面自然 Tab 键顺序。如果多个元素的 tabindex 大于大于 0，则制表符顺序从大于零的最小值开始并向上运行。使用大于 0 的 tabindex 被视为 反模式。

确保可通过键盘使用控件

Lighthouse 等工具擅长自动检测某些无障碍功能然而，某些测试仍须由人工完成。

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

在页面级别管理焦点

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

在这种情况下，请确定所选内容区域，并为其指定 tabindex -1 并调用其 focus 方法。这样可确保相应内容不会出现在自然 Tab 键顺序。这种技术称为“管理焦点”，可保留使用户感知的情境与网站的视觉内容保持同步。

管理组件中的焦点

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

知道要实现哪些键盘行为可能很困难。通过无障碍富互联网应用 (ARIA) 创作做法该指南列出了组件类型及其支持的键盘操作类型。

在制表符顺序中插入元素

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

<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>

这会从自然 Tab 键顺序中移除某个元素，但该元素通过调用其 focus() 方法来聚焦。

对元素应用 tabindex="-1" 不会影响其子元素；如果它们自然处于 Tab 键顺序，或由于 tabindex 值而出现，它们将保留在标签页顺序中要从 Tab 键顺序中移除某个元素及其所有子元素，不妨考虑使用 WICG 的 inert polyfill。该 polyfill 模拟建议的 inert 属性的行为，这会阻止辅助技术选择或读取元素。

注意：inert polyfill 尚处于实验阶段，可能无法在所有情况下都按预期运行。在生产环境中使用之前，请仔细测试。

避免使用 `tabindex > 0`

任何大于 0 的 tabindex 都会将元素跳至自然标签页的前面订单。如果有多个元素的 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。本指南列出了常见的界面模式，并列出了组件应该支持哪些功能