页面上的视觉顺序遵循 DOM 顺序

合乎逻辑的 Tab 键顺序对于用户获得流畅的键盘体验非常重要。屏幕阅读器和其他辅助技术会按照 DOM 顺序浏览网页。 信息流应合理。

如何手动测试

如需检查应用的标签页顺序是否合理，请尝试按 Tab 键浏览页面。一般来说，焦点应遵循阅读顺序，即从上到下的顺序。对于大多数语言，朗读顺序是从左向右排列。在某些语言（例如阿拉伯语和希伯来语）中，阅读顺序为从右到左。

在评估标签页顺序时，请注意以下两个要点：

  • DOM 中的元素是否按逻辑顺序排列？
  • 屏幕外内容是否已在导航栏中正确隐藏？

注意导航中是否有任何跳跃现象。此外，请注意是否有任何跳出屏幕的情况，即按 Tab 键会将您带到不应显示的内容。

如需了解详情，请参阅键盘使用基础知识。

解决方法

如果焦点顺序有误，请重新排列 DOM 中的元素，以使 Tab 键顺序更自然。

避免使用 CSS 在视觉上重新调整元素的位置，因为辅助技术用户会体验到无意义的导航。请将元素移至 DOM 中的更前面的位置，而不是使用 CSS。

如果键盘控件仍可访问屏幕外内容，请考虑使用 tabindex="-1" 将其移除。

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

资源

网页上的视觉顺序遵循 DOM 顺序审核的源代码