网格布局和辅助功能 | CSS Grid Layout: CSS Grid Layout and Accessibility

我们这些从事Web开发多年的人可能会认为CSS Grid有点像使用“表格来布局”。在Web设计的早期，我们构建页面布局的方法是使用HTML表，然后将我们的设计分解到这些表的单元格中，以便创建布局。这与后来出现的“CSS定位”相比有一些优势，因为我们可以利用表显示提供的对齐和全高度列。然而，最大的缺点是，它将我们的设计与标记联系在一起，常常会在这样做的同时产生可访问性问题。为了把设计放进表格中，我们通常会用一些方法来分解内容，例如，当屏幕阅读器读出时，这些内容根本就没有意义。

在使用CSS时，我们经常谈到CSS的布局，使内容与标记和表示分离。最终的目标是我们可以创建一个语义和良好结构的文档，然后应用CSS创建我们想要的布局。站点，如CSS禅园展示了这种能力。大CSS禅园要求我们使用相同的标记，并使用CSS创建一个独特的设计。

CSS网格布局不存在与表相同的问题，我们的网格结构是用css定义的，而不是在标记中定义的。如果我们需要添加一个元素，我们可以使用一些没有语义意义的东西。在纸网格上帮助我们正确地实现内容与标记分离的承诺，然而，这一想法是否有可能走得太远呢？我们能不能创造通过我们使用网格的可访问性问题？

css网格布局中的内容重排序

我们已经在这些指南中看到，网格给了我们以各种方式重新排序页面内容的能力。我们可以使用order属性，该属性将更改项的自动放置方式。我们可以用grid-auto-flow: dense

该规范包括一个涵盖重新排序和辅助功能的部分。在该部分的介绍中，详细介绍了当使用网格布局对内容进行可视化重新排序时，规范期望浏览器执行的操作。

网格布局赋予作者文档重新排列的巨大能力。但是，这些并不能取代文档来源的正确排序。订单属性和网格放置不影响非可视媒体（例如语音）中的排序。同样，重新排列栅格项目不会影响顺序导航模式的默认遍历顺序（例如通过链接循环，参见tabindex HTML5）。

如果使用网格布局直观地重新排序内容，则如果屏幕阅读器或其他文本到语音用户代理读取内容，则不会更改项目的排序方式。此外，重新排序不会更改选项卡顺序。这意味着使用键盘导航的人可能会在您的站点上的链接中添加选项卡，突然发现自己会从上到下跳到文档的底部，原因是重新排序的项正在排队。

规范警告作者（web开发者的CSSWG术语）不要做这个重新排序。

作者必须使用Order和网格布局属性，仅用于对内容进行可视化而非逻辑性的重新排序。使用这些特性执行逻辑重新排序的样式表是不符合规定的。

这对实际的网格布局设计意味着什么？

视觉非逻辑重排

任何时候，您都可以使用网格布局重新排序--或者使用柔性盒--您只执行以下操作：视觉重排基础来源是控制文本到语音，以及文档的制表符顺序之类的东西。通过一个非常简单的例子，您可以看到这是如何工作的。

在本例中，我使用网格来布局一组包含链接的框。我已经使用了基于行的布局属性来在网格的第二行中定位方框1。从视觉上看，它现在显示为列表中的第四项。但是，如果我从链接到链接，选项卡顺序仍然以方框1开头，因为它在源中位于第一位。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column: 1;
  grid-row: 2;
}

<div class="wrapper">
  <div class="box box1"><a href="">One</a></div>
  <div class="box box2"><a href="">Two</a></div>
  <div class="box box3"><a href="">Three</a></div>
  <div class="box box4"><a href="">Four</a></div>
  <div class="box box5"><a href="">Five</a></div>
</div>

规范说，在这种情况下，如果方框1在这个位置上确实有逻辑意义，我们应该回到我们的源代码，在那里进行更改，而不是使用网格布局重新排序。这就是视觉和逻辑重排的意思，逻辑排序对于文档的意义和结构非常重要，我们应该确保保留这种结构。

火狐挠性盒命令错误

有一个长期的臭虫在Firefox Flexbox实现中，这里突出了一个问题。虽然Firefox中的CSS网格布局实现中没有这个问题，但它确实演示了我们在使用网格时需要考虑的一个问题。

目前，在使用Flexbox时，Firefox将遵循可视顺序，而不是在文档中选择逻辑顺序。有人争论过这实际上是一种更好的方法--使制表符顺序遵循文档的可视顺序。然而，就目前的情况而言，这是Firefox实现中的一个bug。这两种规范都说明逻辑顺序是文档顺序，而制表符顺序和文本到语音浏览器应该遵循文档的逻辑顺序。

我们应该如何处理网格布局的可访问性？

从规范中我们知道，我们需要确保文档维护内容的逻辑顺序。我们应该如何处理我们的开发，以确保我们维护不同用户的可访问性以及他们与我们页面交互的方式？

从结构化和可访问的Documenta网格布局开始，应该意味着我们不需要为了获得我们想要的布局而更改文档源。因此，您的页面的起点应该是一个结构良好和可访问的源文档。正如CSS网格布局规范中所指出的，这通常会为您提供一个良好的结构你的最小屏幕设备如果用户正在移动上浏览一个长文档，则该用户的优先级通常映射到源中的优先级。创建一个响应性强、负责任的网格使用一个坚实的文档，您可以开始添加您的布局，您可能会使用媒体查询若要创建其他列并对不同屏幕大小和设备进行更改，请执行以下操作。网格在这里非常有用，例如，移动源顺序中被剥夺的元素可以移动到桌面布局的侧栏中。这里的关键是保持测试，一个非常简单的测试就是选项卡在文档周围。.那个命令还有意义吗？检查你没有以一种特殊的方式从顶部跳到底部。如果是这样的话，这将是一个迹象，你需要解决一些关于布局的问题。返回到数据源--在设计过程中的任何时候，您都会发现自己使用网格重新定位元素的位置，考虑是否应该返回文档并更改逻辑顺序。使用CSSGrid布局的好处是，您应该能够在源中移动一个项以符合逻辑顺序，而无需对布局进行大的更改。这是一个巨大的进步float-基于布局的，例如，为了在不同断点上得到布局，文档源非常重要。然而，作为开发人员，我们有责任记住回到源代码并更新它以维护逻辑顺序。

网格与标记扁平化的危险

在CSS网格布局中以及在CSS Flexbox中需要注意的另一个问题是诱惑扁平标记。正如我们所发现的，要使一个项成为网格项，它需要是网格容器的直接子元素。因此，您有一个<ul>元素在网格容器中，那ul成为网格项-子<li>元素没有。

如果subgrid价值display实现，则可以通过声明以下命令使网格项的这些子元素参与整个网格布局。ul元素a亚网格.目前唯一的方法是使用display: contents若要使由ul从DOM中消失。有关此交互的详细信息，请参阅网格布局与其他布局方法的关系以及关于display: contents.

考虑到可互操作的支持display: contents是有限的，而且我们还没有子网格，在开发一个站点时，使用CSS网格布局来平缓标记，删除语义元素，从而使创建布局更简单，这是有一定诱惑的。例如，某些内容在语义上被标记为列表，但您决定使用一组<div>元素，您可以将元素设置为容器的直接子元素。display: grid请注意这种诱惑，并找到方法来开发您的设计而不去掉标记。从结构良好的文档开始是避免这个问题的一个非常好的方法，因为您会意识到，如果您真的必须进入文档并这样做，那么您将需要删除语义元素以使布局工作。

进一步阅读

关于可访问性和CSS网格布局，现有的资料并不多。许多问题与CSS Flexbox中提出的问题相似，后者也给出了用flex-direction而order财产。

在文档源顺序之后的可视显示的概念在WCAG成功标准技术-C27技术...

作为一种开始思考这些问题的方法，当您使用CSS网格布局时，我建议您阅读Flexbox&键盘导航断开莱昂妮·沃森的。也莱昂尼的演讲视频有助于更多地了解屏幕阅读器如何使用CSS中的事物的可视化表示。阿德里安·罗塞利也发表了关于不同浏览器中的选项卡顺序