文档中的内容顺序对于网站的可访问性非常重要。 屏幕阅读器会根据文档顺序朗读内容，并使用您选择的 HTML 元素赋予内容的含义。用户使用键盘（而不是触摸屏或鼠标）浏览网站时，可以按 Tab 键来浏览文档。 这意味着它们会从活动元素跳转到活动元素，在链接和表单字段之间按 Tab 键切换，而且会同样按照它们在文档中的存在顺序进行切换。
因此，从结构合理的文档着手，并使用所有合适的 HTML 元素是打造无障碍网站的关键环节。不过，在开始使用 CSS 后，您有可能撤消其中一些出色的工作。我们来了解一下这其中的缘由。
来源与视觉顺序
网站导航通常以链接列表的形式进行标记。 然后，您可以使用 Flexbox 将其转换为水平栏。在下面的 Glitch 示例中，我创建了这种常用模式。点击进入示例，然后使用 Tab 键切换链接。 焦点将按照从左到右的逻辑方向移动，这与我们阅读英语中的顺序相同。
如果您创建了这种类型的模式，然后系统要求您将来源中第二位的“Contact Us”（联系我们）移到末尾。您可以使用 Flexbox 中的 order 属性。下例使用 order 属性重新排列了项目，可尝试按 Tab 键浏览这些项目。
焦点会跳到最后一项，然后再次跳回。 就标签页顺序而言，该项是第二项。 不过从视觉上看，它是最后一项。
上面的示例突出显示了在使用 CSS 对内容进行重新排列和重新排序时将会遇到的问题。 如果您正在处理此问题，那么正确的做法是更改源代码中的顺序，而不是使用 CSS。
哪些 CSS 属性会导致重新排序？
任何允许您移动元素的布局方法都可能会导致此问题。以下 CSS 属性通常会导致内容重新排序问题：
- 使用
position: absolute并直观呈现某个项，使项退出流。 - Flexbox 和网格布局中的
order属性。 - Flexbox 中
flex-direction的row-reverse和column-reverse值。 - 网格布局中
grid-auto-flow的dense值。 - 按行名称或编号定位，或使用网格布局中的
grid-template-areas定位。
在下一个示例中，我使用 CSS 网格创建了一个布局，并使用行号来放置列表项，而不考虑它们在源代码中的位置。
请尝试按 Tab 键导航此示例，看看焦点如何跳转。这会让用户感到非常困惑，尤其是当网页较长时。
测试问题
一个简单的测试就是使用键盘在网页中导航。你能万事俱备吗？ 在此过程中有没有奇怪的跳跃现象？
如需查看内容重新排序的直观演示，请尝试使用 Chrome 无障碍功能数据分析扩展程序中的标签页停止检查工具。下图显示了该工具中的 CSS 网格示例。 您可以看到焦点是如何在布局中跳转的。
内容重新排序和响应性网页设计
如果您的内容只有一种呈现方式，那么按照逻辑顺序排列来源并在布局中反映这一点通常并不困难。当您考虑在不同断点处布局布局时，情况可能会变得更难。例如，在较小的屏幕上将某个元素移至布局底部可能很有意义。
目前没有好的解决方案可以解决此问题。 在大多数情况下，开发“移动优先”有助于保持源代码和布局井然有序。 您针对移动内容做出的优先选择通常都是切实可行的。 关键是要注意何时有可能对此类内容进行重新排序，并测试最终体验在每个断点是否都不会过于突兀。