自定义控件具有关联的标签

自定义互动控件应可聚焦。如果您使用 JavaScript 将 <div> 转换为精美的下拉菜单,它不会自动插入到 Tab 键顺序中。您需要手动检查所有自定义控件是否可通过键盘聚焦。另请参阅键盘操作基础知识

如何手动测试

如需测试自定义控件是否可聚焦,请按 TAB 键浏览网站:

您能否访问页面上的所有互动控件? 否则,您可能需要使用 tabindex 来提高这些控件的可聚焦性。另请参阅使用 tabindex 控制焦点

修正方法

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

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

重要意义

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

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

资源