<button> 或 <input> 等标准 HTML 元素内置了键盘无障碍功能，应尽可能使用。不过，如果您需要构建自定义互动元素，可以通过添加 tabindex 来创建预期的用户行为。
请仅向互动式内容添加 tabindex。即使内容非常重要（例如关键图片），屏幕阅读器用户也可以理解相应内容，而无需聚焦。
什么是 tabindex？
如果您需要修改内置元素提供的默认 Tab 键顺序，可以使用 tabindex HTML 属性明确设置元素的 Tab 键位置。
tabindex 可应用于任何元素，但只能应用于交互式元素，并且接受一系列整数值。借助 tabindex，您可以为可聚焦页面元素指定明确的顺序，将原本无法聚焦的元素插入 Tab 键顺序中，以及从 Tab 键顺序中移除元素。例如：
tabindex="0"：在自然 Tab 键顺序中插入元素。可通过按 Tab 键聚焦该元素，而调用其 focus() 方法则可聚焦该元素。
tabindex="-1"：从自然 Tab 键顺序中移除某个元素，但仍可通过调用其 focus() 方法获得该元素的焦点
tabindex="5"：任何大于 0 的 tabindex 都会将相应元素置于自然 Tab 键顺序的最前面。如果多个元素的 tabindex 均大于 0，则 Tab 键顺序会从大于零的最小值开始，并逐级向上。使用大于 0 的 tabindex 被视为反模式。
确保可通过键盘使用控件
Lighthouse 等工具非常擅长自动检测某些无障碍功能问题，但有些测试仍必须由人工完成。
请尝试按 Tab 键浏览您的网站。您能访问网页上的所有互动控件吗？否则，您可能需要使用 tabindex 来提高这些控件的可聚焦性。
在页面级别管理焦点
有时，tabindex 有助于打造顺畅的用户体验。例如，如果您构建一个包含不同内容部分的强大单页，其中某些内容在网页加载的不同点处隐藏。这意味着，导航链接会更改可见内容，而无需刷新网页。
在这种情况下，请标识所选内容区域，为其指定 -1 的 tabindex 并调用其 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 键顺序，则子项将保持 Tab 键顺序。如需从 Tab 键顺序中移除某个元素及其所有子元素，请考虑使用 WICG 的 inert polyfill。polyfill 会模拟提议的 inert 属性的行为，该属性会阻止辅助技术选择或读取元素。
避免使用 tabindex > 0
任何大于 0 的 tabindex 都会将元素跳至自然制表符顺序的最前面。如果有多个元素的 tabindex 大于 0，则制表符顺序从大于 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。本指南列出了常见的界面模式，并确定了组件应支持的键。