标准 HTML 元素（如 <button> 或 <input>）免费内置了键盘无障碍功能。但是，如果您要构建自定义互动组件，请使用 tabindex 属性来确保可通过键盘访问这些组件。
检查您的控件是否可以通过键盘进行访问
Lighthouse 这样的工具非常适用于检测某些无障碍功能问题，但有些东西只能由人工测试。
请尝试按 Tab 键浏览您的网站。您能否打开页面中的所有互动控件？否则，您可能需要使用 tabindex 来提高这些控件的可聚焦性。
向 Tab 键顺序插入元素
使用 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 键顺序。如需从 Tab 键顺序中移除某个元素及其所有子元素，请考虑使用 WICG 的 inert polyfill。polyfill 会模拟提议的 inert 属性的行为，该属性会阻止辅助技术选择或读取元素。
避免使用 tabindex > 0
如果 tabindex 大于 0，则将相应元素跳到自然 Tab 键顺序的最前面。如果存在多个 tabindex 大于 0 的元素，则 Tab 键顺序从大于 0 的最小值开始，一直按到降序。
使用大于 0 的 tabindex 会被视为反模式，因为屏幕阅读器按 DOM 顺序（而不是 Tab 键顺序）浏览页面。如果您需要让某个元素在 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。这份便捷指南列出了常见的界面模式，并说明了您的组件应支持哪些键。