互动控件可通过键盘聚焦

手动检查所有自定义控件是否可通过键盘聚焦并显示聚焦指示器。元素获得焦点的顺序应遵循 DOM 顺序。 如果您不确定哪些元素应获得焦点，请参阅 web.dev 上的“无障碍功能”课程中的“焦点”模块。

如何手动测试

如需测试自定义控件是否可聚焦并显示聚焦指示器，请先通过 Tab 键在您的网站中移动。使用 TAB（或 SHIFT + TAB）在控件之间移动，并使用箭头键以及 ENTER 和 SPACE 来操控其值（另请参阅键盘访问基础知识）：

您能否触及页面上的所有交互控件？ 每个交互控件上是否有焦点指示标志？

解决方法

如果您无法通过按 Tab 键浏览网页上的所有元素，则可能需要使用 tabindex 来提高这些控件的可聚焦性。

如需使自定义控件可获得焦点，请使用 tabindex="0" 将自定义控件元素插入自然的标签页顺序中（另请参阅使用 tabindex 控制焦点）。例如：

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

您可能还需要向自定义控件元素添加适当的 ARIA 角色。请参阅自定义控件具有 ARIA 角色。

如果您没有看到焦点指示器，不妨考虑使用 :focus 始终显示焦点指示器。无论您是使用鼠标还是键盘按 Tab 键切换到该按钮，该按钮的焦点指示器始终看起来都一样（另请参阅设置焦点样式）。

重要性

对于无法使用鼠标或选择不使用鼠标的用户，键盘导航是访问屏幕上的所有内容的主要方式。良好的键盘体验取决于逻辑 Tab 键顺序和可识别的焦点样式。如果键盘用户无法看到或了解焦点内容，则无法与页面互动。

如需了解详情，请参阅如何进行无障碍功能审核。

资源