标准 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>
TODO:DevSite - 思考并检查评估
键盘访问配方
如果您不确定您的自定义组件可能需要哪种级别的键盘支持,可以参阅 ARIA 编写做法 1.1。这份便捷指南列出了常见的界面模式,并说明了您的组件应支持哪些键。