使用 tabIndex 控制焦点

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

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

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

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

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

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

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

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

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

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

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

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

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

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