页面上的视觉顺序遵循 DOM 顺序
bookmark_borderbookmark
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
合乎逻辑的 Tab 键顺序对于用户获得流畅的键盘体验非常重要。屏幕阅读器和其他辅助技术会按照 DOM 顺序浏览网页。
信息流应合理。
如何手动测试
如需检查应用的标签页顺序是否合理,请尝试按 Tab 键浏览页面。一般来说,焦点应遵循阅读顺序,即从上到下的顺序。对于大多数语言,朗读顺序是从左向右排列。在某些语言(例如阿拉伯语和希伯来语)中,阅读顺序为从右到左。
在评估标签页顺序时,请注意以下两个要点:
- DOM 中的元素是否按逻辑顺序排列?
- 屏幕外内容是否已在导航栏中正确隐藏?
注意导航中是否有任何跳跃现象。此外,请注意是否有任何跳出屏幕的情况,即按 Tab 键会将您带到不应显示的内容。
如需了解详情,请参阅键盘使用基础知识。
解决方法
如果焦点顺序有误,请重新排列 DOM 中的元素,以使 Tab 键顺序更自然。
避免使用 CSS 在视觉上重新调整元素的位置,因为辅助技术用户会体验到无意义的导航。请将元素移至 DOM 中的更前面的位置,而不是使用 CSS。
如果键盘控件仍可访问屏幕外内容,请考虑使用 tabindex="-1"
将其移除。
如需了解详情,请参阅使用 tabindex 控制焦点。
资源
网页上的视觉顺序遵循 DOM 顺序审核的源代码
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2019-05-02。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2019-05-02。"],[],[]]