互动控件可通过键盘聚焦

手动检查所有自定义控件是否可通过键盘聚焦以及显示焦点指示器。元素的聚焦顺序应力求遵循 DOM 顺序。如果您不确定哪些元素应获得焦点,请参阅焦点简介

如何手动测试

如需测试自定义控件是否可聚焦以及是否显示焦点指示标志,请先在您的网站上按 Tab 键来浏览。使用 TAB(或 SHIFT + TAB)在控件之间移动,并使用箭头键以及 ENTERSPACE 操控它们的值(另请参阅键盘访问基础知识):

您能否访问页面上的所有互动控件? 每个互动控件是否都有焦点指示标志?

修正方法

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

如需使自定义控件可聚焦,请使用 tabindex="0" 将自定义控件元素插入自然 Tab 键顺序(另请参阅使用 tabindex 控制焦点)。例如:

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

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

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

重要意义

对于无法使用鼠标或选择不使用鼠标的用户来说,键盘导航是浏览屏幕上的所有内容的主要方式。良好的键盘输入体验依赖于逻辑标签页顺序和易于识别的焦点样式。如果键盘用户看不到焦点,就无法与页面互动。

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

资源