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

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

如何手动测试

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

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

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

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

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

解决方法

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

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

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

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

资源

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