手动检查所有自定义控件是否可通过键盘聚焦以及显示焦点指示器。元素的聚焦顺序应力求遵循 DOM 顺序。如果您不确定哪些元素应获得焦点,请参阅焦点简介。
如何手动测试
如需测试自定义控件是否可聚焦以及是否显示焦点指示标志,请先在您的网站上按 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
始终显示焦点指示标志。无论您使用鼠标还是键盘来敲击按钮,该按钮的焦点指示器始终看起来相同(另请参阅设置焦点样式)。
重要意义
对于无法使用鼠标或选择不使用鼠标的用户来说,键盘导航是浏览屏幕上的所有内容的主要方式。良好的键盘输入体验依赖于逻辑标签页顺序和易于识别的焦点样式。如果键盘用户看不到焦点,就无法与页面互动。
如需了解详情,请参阅如何进行无障碍功能审核。