使用 CSS 让表格更易于访问

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

有很多方法可以使 HTML 表格更易于访问：添加 <code><div></code> 标签<caption>，使用语义化的 HTML（例如<thead><code> <tbody><div> </code>、<code><div> <tfoot></code> 等），将日期与正确的表头关联起来（使用role<code><div> id</code> 和<code><div></code> 标签headers）……

大部分更改将在 HTML 端进行，但有些事情可以完全通过 CSS 来完成，以提高表格的可访问性和可用性。

让我们从一个例子开始来看：

<table>
  <thead>
    <tr>
      <th>Col1</th> <th>Col2</th> <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ABC</td> <td>DEF</td> <td>GHI</td>
    </tr>
    <tr>
      <td>JKL</td> <td>MNO</td> <td>PQR</td>
    </tr>
    <tr>
      <td>STU</td> <td>VWX</td> <td>YZ.</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>123</td> <td>456</td> <td>789</td>
    </tr>
  </tfoot>
</table>

这段代码在大多数浏览器上会生成类似这样的表格：

这是一个没有任何样式的表格。毋庸置疑，它看起来很糟糕。要提高整体的可访问性和易用性，还有许多问题需要解决。即使是视力正常的用户（包括视力2.0的用户）也会遇到很多问题：

• 很难将表头行与其他行区分开来（即使使用了粗体<th>）。
• 行内内容过于密集，可能不容易看出一列在哪里结束，下一列在哪里开始。
• 在较大的表格中，用户可能会“迷失”行号，并在行之间跳转。
• 无法区分表格主体中的行和表格页脚中的行。

本文将介绍一些解决这些问题的简单方法，以及如何在 CSS 端实现这些方法。

1. 在内容之间添加间距

增加间距有助于使表格更简洁清爽。我们可以通过给表格单元格添加内边距来实现这一点——别忘了<th>还有：

th, td {
  padding: 0.5rem 1rem;
}

修改后的原始表格将如下所示：

请注意，可以通过调整填充值来增大或缩小间距，但目前表格列已经清晰区分，一目了然，这正是我们的目标。

为了更好地区分内容，我们可以采用不同的方法，在表格中添加边框——这样就能解决上面提到的几个问题——但就我个人而言，结果仍然不够理想，需要以下一些建议才能使其看起来更好。

2. 在表格区域之间添加视觉分隔

唯一能看出第一行是标题的视觉特征是粗体字。这是因为我们使用了粗体<th>。如果他用的<td>是其他样式，就无法分辨了。

同样的情况也发生在<tfoot>; 从视觉上无法判断最后一行是表格页脚还是表格中的另一行<tbody>。

可以采取的措施之一是在顶部<thead>和底部单元格下方各添加一条线<tfoot>。我们可以通过给头部和底部单元格添加边框来实现这一点，但这可能会导致一些（很容易解决的）问题。

另一种方法是使用一个box-shadow将应用于 `<div>`thead和 `<span> tbody` 元素的属性。像这样：

thead {
  box-shadow: inset 0 -2px;
}

tfoot {
  box-shadow: inset 0 2px;
}

现在您可以清楚地区分表格中的页眉、页身和页脚：

虽然各个部分很容易识别，但如果表格有很多行和列，水平阅读数据的用户可能会从一行跳到另一行，从而忘记自己在哪里。

3. 区分相邻行

为了避免行与行之间跳动，我们可以交替更改行的颜色。为此，我们可以使用以下方法指定奇数行，使用以下方法指定:nth-child(odd)偶数行:nth-child(even)：

table > tr:nth-child(even),
tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.05);
}

table > tr:nth-child(odd),
tbody tr:nth-child(odd) {
  box-shadow: 0 -1px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.1);
}

如您所见，应用上述代码后，行与行之间会留下细小的间距，看起来不太美观。为了避免这种情况，我们可以折叠边框：

table, thead, tbody, tfoot, tr, td, th {
  border-collapse: collapse;
}

这将生成以下表格：

现在我们的表格有了清晰划分的部分，交替的行使内容更容易理解。

4. 为活动/悬停行添加高亮显示

最后一步是突出显示当前“活动”的行，或者更具体地说，突出显示鼠标悬停的行。

:hover我们通过为每一行的状态应用不同的背景来实现这一点：

table > tr:hover,
tbody tr:hover {
  background: #bdf;
}

现在表格和之前一样，但是当鼠标悬停在每一行上时，该行会以蓝色显示：

至此，我们就完成了。您可能已经注意到，这些技巧并非专门针对辅助功能，而是更多地与表格的可视化和易用性相关。

它们会影响视力正常用户和低视力用户与桌子的互动方式。从这个意义上讲，它们对于无障碍设计也至关重要。

创建数据排序清晰、易于区分的表格。