使用 tabIndex 控制焦点

标准 HTML 元素(如 <button><input>)免费内置了键盘可访问性。不过,如果您正在构建自定义交互组件,请使用 tabindex 属性确保它们可以通过键盘访问。

尽可能使用内置 HTML 元素,而不是构建您自己的自定义版本。例如,<button> 非常容易设置样式并且已经具有完整的键盘支持。这样您就无需管理 tabindex 或添加 ARIA 语义。

检查您的控件是否可通过键盘访问

像 Lighthouse 这样的工具非常适合检测某些可访问性问题,但有些东西只能由人来测试。

尝试按 Tab 键浏览您的网站。您是否能够访问页面上的所有交互式控件?如果不能,您可能需要使用 tabIndex 来提高这些控件的可聚焦性。

将元素插入到 Tab 键顺序中

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

html
1
<div tabindex="0">Focus me with the TAB key</div>

要聚焦某个元素,请按 Tab 键或调用该元素的 focus() 方法。

从 Tab 键顺序中删除元素

使用 tabindex="-1" 删除元素。例如:

html
1
<button tabindex="-1">Can't reach me with the TAB key!</button>

这将从自然的 Tab 键顺序中删除一个元素,但仍然可以通过调用该元素的 focus() 方法来聚焦该元素。

请注意,对元素应用 tabindex="-1" 不会影响其子元素;如果它们本来就处在 Tab 键顺序中或由于 tabindex 值的原因,它们将保留在 Tab 键顺序中。

避免 tabindex > 0

任何大于 0 的 tabindex 都会使元素跳到自然 Tab 键顺序的前面。如果有多个元素的 tabindex 大于0,则 Tab 键顺序从大于 0 的最低值开始,依次向上。

使用大于 0 的 tabindex 被认为是一种反模式,因为屏幕阅读器按 DOM 顺序导航页面,而不是按 Tab 键顺序。如果您需要某个元素在 Tab 键顺序中更早出现,则应将其移至 DOM 中较早的位置。

使用 Lighthouse 可以轻松识别 tabindex > 0 的元素。运行可访问性审计(Lighthouse > Options(选项)> Accessibility(可访问性))并查找“没有元素的 [tabindex] 值大于 0”审计的结果。