有意义的序列

要求内容

如果内容的含义依赖于阅读顺序——操作说明、叙述性内容、分步骤流程——则该顺序必须在 DOM 中得到保留。屏幕阅读器和重排引擎按文档的源代码顺序遍历内容；若 CSS order、position: absolute、flex-direction: row-reverse 或网格布局使视觉顺序与 DOM 顺序产生错位，用户体验将随之崩溃。

如何满足要求

• 按照内容预期的阅读顺序编写 DOM；使用 CSS 进行视觉定位，而非重新创造内容序列。
• 审查所有使用 flex-direction: row-reverse、CSS order 或 grid-area 将内容移出源代码位置的情形。
• 对于多栏布局，在 DOM 中按阅读顺序放置各栏，而非按视觉栏序排列。
• 通过禁用 CSS（浏览器开发者工具或”查看源代码顺序”功能）进行测试——去除样式后的内容流仍应能正常理解。
• 使用屏幕阅读器逐页浏览，记录任何令人感到意外的朗读顺序。

常见失败情形

• 侧边栏在视觉上位于右侧，但在 DOM 中排在最前面——屏幕阅读器会先读出广告、相关链接和行动呼吁，再读主要文章。
• 导航菜单使用 flex-direction: row-reverse——视觉用户看到的是”首页 / 关于 / 联系”，屏幕阅读器却读出”联系 / 关于 / 首页”。
• CSS order 重排表单字段的视觉顺序，导致 Tab 键跳转难以预测。
• “跳至内容”链接在 DOM 中位于导航之后，但通过绝对定位显示在视觉顶部——键盘用户仍会先遇到导航。
• 网格中的卡片视觉上从左到右排列，但由于某种巧妙的网格技巧，在 DOM 中从下到上放置。

重要性

有意义的序列失败往往难以察觉——页面看起来正常、能通过验证、也能通过大多数自动化检查。只有当真实的屏幕阅读器用户尝试从头到尾阅读页面时，问题才会显现。大多数修复仅需对 DOM 进行小幅重排，但诊断问题所在的成本相当高。