该页面具有合乎逻辑的 Tab 键顺序

许多不同的用户依靠键盘来浏览应用,从存在暂时性和永久性运动障碍的用户,到使用键盘快捷键来提高效率和效率的用户。逻辑标签页顺序是提供流畅的键盘导航体验的重要组成部分。

如何手动测试

如需检查应用的 Tab 键顺序是否合乎逻辑,请尝试在页面上按 Tab 键导航。元素的聚焦顺序应力求遵循 DOM 顺序。一般来说,焦点应按照阅读顺序,从左向右移动,从顶部向底部移动。

如需了解详情,请参阅键盘操作基础知识

您能否访问页面上的所有互动控件? 否则,您可能需要使用 tabindex 来提高这些控件的可聚焦性。一般经验法则是,任何用户可以与之互动或提供输入的控件都应可聚焦并显示焦点指示器。如果键盘用户看不到焦点,就无法与页面互动。

修正方法

如果焦点顺序看起来不对,您应该重新排列 DOM 中的元素,使 Tab 键顺序更加自然。

如果您无法访问页面上的所有交互式控件,第一个解决方法是将自定义控件替换为标准化 HTML 替代控件。例如,将类似按钮的 <div> 替换为 <button>。使用内置 HTML 元素可显著提高网站的可访问性,并显著减少您的工作量。

如果您构建的自定义互动组件不包含标准化 HTML 等效项,请使用 tabindex 属性以确保可通过键盘访问这些组件。例如:

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

如需了解详情,请参阅使用 tabindex 控制焦点

资源

该网页具有逻辑标签页顺序审核日志的源代码