互动控件可通过键盘聚焦

发布时间：2019 年 5 月 2 日

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

如何手动测试

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

您是否能够访问网页上的所有互动控件？每个互动式控件上是否有焦点指示器？

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

如需使自定义控件可聚焦，请使用 tabindex="0" 将自定义控件元素插入到自然 Tab 键顺序中（另请参阅使用 tabindex 控制焦点）。例如：

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

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

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

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

如需详细了解无障碍功能，请参阅学习无障碍功能。