网格、内容重新排序和可访问性

假设有以下代码

<ol>
  <li>Get hungry</li>
  <li>Order pizza</li>
  <li>Eat pizza</li>
</ol>

这段 HTML 代码最终以这种方式出现在 DOM 中（以及如何将其暴露给辅助技术），并且默认情况下，这些列表项也以该顺序视觉显示。 在大多数布局情况下，视觉顺序将与 DOM 顺序匹配。不做任何操作，列表项将沿文档的块方向流动。应用 Flexbox，它将沿文档的内联方向流动。

但是 Flexbox 和网格也允许您将其弄乱。现在假设有以下代码

ol { 
  display: flex;
  flex-direction: row-reverse;
}

在这种情况下，DOM 顺序仍然有意义，但视觉顺序完全错误。不仅仅是row-reverse。有很多 Flexbox 和网格属性可能参与其中并导致混乱：order 属性、将项目流入列而不是行，以及以不同寻常的顺序专门定位项目，等等。即使是绝对定位也可能导致同样的问题。

Manuel Matuzovic 表示

如果视觉顺序和 DOM 顺序不匹配，它可能会激怒并混淆用户，直至体验变得非常糟糕，以至于网站无法使用。

Rachel Andrew 强调了这个问题（包括 我们发布的内容）作为一个重大问题，并希望我们能够在 CSS 级别获得工具来提供帮助。

我认为这是我们迫切需要在 CSS 级别解决的问题。我们需要提供一种方法，允许标签顺序和阅读顺序遵循视觉顺序。源代码顺序是一个很好的默认值，如果您正在利用正常流，那么很多时候遵循源代码正是您想要的。但是并非总是如此，并非在每个断点都是如此。如果我们不为人们提供解决方案，我们将最终陷入困境。我们已经为人们提供了这些很棒的工具，但现在我感觉自己好像不得不告诉人们不要使用它们。

直接链接 →