许多不同类型的用户都依赖于键盘来浏览应用,从暂时性和永久性运动障碍的用户,到使用键盘快捷键提高效率的用户,都需要键盘。合理的标签页顺序是提供流畅键盘导航体验的重要组成部分。
如何手动测试
如需检查应用的标签页顺序是否合理,请尝试按 Tab 键浏览页面。元素获得焦点的顺序应遵循 DOM 顺序。 一般来说,焦点应遵循阅读顺序,从左到右、从页面顶部到底部移动。
如需了解详情,请参阅键盘访问基础知识。
您能否触及页面上的所有交互控件?
如果没有,您可能需要使用 tabindex
来提高这些控件的可聚焦性。一般经验法则是,用户可以与之互动或向其提供输入的任何控件都应可获得焦点并显示焦点指示器。如果键盘用户看不到焦点所在的位置,就无法与网页互动。
解决方法
如果焦点顺序似乎不正确,您应重新排列 DOM 中的元素,以使标签页顺序更自然。
如果您无法访问网页上的所有交互控件,首选解决方法是将自定义控件替换为标准化的 HTML 替代控件。例如,将用作按钮的 <div>
替换为 <button>
。使用内置 HTML 元素可以显著提高网站的无障碍功能,并大幅减少工作量。
如果您要构建没有标准化 HTML 等效项的自定义交互式组件,请使用 tabindex
属性来确保这些组件可通过键盘访问。例如:
<div tabindex="0">Focus me with the TAB key</div>
如需了解详情,请参阅使用 tabindex 控制焦点。