文档中内容的顺序对于网站的无障碍功能至关重要。屏幕阅读器根据文档顺序读取内容，并使用 HTML 元素为内容赋予更多含义。
使用键盘（而非触摸屏或鼠标）浏览网站的人员会在文档中进行 Tab 键切换。他们从一个活动元素跳转到另一个活动元素，在链接和表单字段之间切换，顺序与元素在文档中出现的顺序一致。
因此，从结构良好的文档开始并使用正确的 HTML 元素是创建无障碍网站的关键部分。但是，当您开始使用 CSS 时，可能会抵消一些良好的效果。
源代码顺序与视觉顺序
网站导航通常标记为链接列表。您可以使用 Flexbox 将这些链接转换为水平栏。在以下示例中，我创建了这个常用的模式。点击示例，然后在链接之间按 Tab 键切换。焦点会按照从左到右的逻辑方向移动，这与我们阅读英语的顺序一致。
假设您创建了这个导航模式，然后被要求将源代码中第二个链接 Contact Us 移动到末尾。您可以使用 Flexbox order 属性来移动其位置。
尝试在下一个示例中的各项之间按 Tab 键切换，该示例使用 order 属性重新排列项目。
焦点跳转到最后一个项目，然后又跳回来。就 Tab 键顺序而言，该项目是第二个项目。但从视觉上看，它是最后一个项目。
该示例突显了我们在使用 CSS 重新排列和重新排序内容时面临的问题。解决此问题的正确方法是更改源代码中链接的顺序，而不是使用 CSS 模拟该更改。
哪些 CSS 属性会导致重新排序？
任何允许您移动元素的布局方法都可能导致此问题。以下 CSS 属性通常会导致内容重新排序问题
- 使用
position: absolute，并在视觉上将项目从文档流中移除。 - Flexbox 和 Grid 布局中的
order属性。 - Flexbox 中
flex-direction的row-reverse和column-reverse值。 - Grid 布局中
grid-auto-flow的dense值。 - Grid 布局中通过行名称或编号进行的任何定位，或者使用
grid-template-areas。
在下一个示例中，我使用 CSS Grid 创建了一个布局，并使用行号定位项目，而没有考虑它们在源代码中的位置。
尝试在此示例中按 Tab 键切换，看看焦点是如何跳动的。这会造成非常令人困惑的体验，尤其是在页面很长的情况下。
测试问题
一个快速的测试方法是通过键盘导航浏览您的页面。您可以访问所有内容吗？在执行此操作时，是否有任何奇怪的跳转？
要直观地演示内容重新排序，请尝试 Chrome 版 Accessibility Insights 扩展程序中的 Tab Stop 检查器。屏幕截图显示了该工具中的 CSS Grid 示例。您可以看到焦点是如何在布局中跳动的。
内容重新排序和响应式 Web 设计
如果您只有一个内容呈现方式，那么您应该能够保持逻辑顺序的源代码，并在布局中反映出来。当您考虑不同断点处的布局时，这可能会更难。例如，在较小的屏幕上，将元素移动到布局底部可能更有意义。
目前，对于该特定问题还没有很好的解决方案。在大多数情况下，开发“移动优先”网站可以帮助您保持源代码和布局的顺序。您在移动设备上所做的关于优先级的选择通常也适用于一般内容。关键是要意识到内容可能重新排序的情况。在每个断点处测试最终体验是否过于突兀。