在 table 中对标题进行分组的 HTML5 标记是什么？

Question

我有一个 table，其中数据行按类别分组。

目前我将它们设计成这样：

目前这两组 header（"Baseline" 和 "Performer"）只是一个额外的 <TR> 和 col-spanning <TD>。这让我觉得很脏。

我想去掉最顶部的 <thead>，并将标题合并到每个组中 header。我知道我不能在 table 中包含多个 <thead> 元素，并且没有 <tgroup>.

这样的东西

我不想将 table 分成多个 table，因为有不同的方法可以对完整的数据集进行排序（例如，table 可以按改为类别）。

我应该使用什么标记：

hide/dispose/delete top-most table header
将相关标题插入每个组标题
仍然可以访问吗？

Answer 1

我知道您不想将它们拆分成多个 table，但是恕我直言，这会使这种结构非常容易访问。您可以让所有组标题都相同 aria-level，然后在每个组内您可以有一个适当的 table 和列 headers。要提供搜索、排序等选项，您需要有一个操作栏，其中每个操作的正确描述相同或更低 aria-level。您还可以使每个组成为容器中的列表项（从辅助工具的角度来看）。

Answer 2

您可以使功能 Group/Type 成为类别列旁边的一列，而不是将行分成几部分。

编辑添加

在那种情况下，我会将 col-spanning 行设为第 th 而不是 td。给它一个像 id="baseline" 这样的 id 属性，同时给列 header 一个 id。然后对于内容行，给第一个单元格一个 headers 属性，它引用那些 id。这是有效的，但屏幕阅读器对 headers/id 关联的支持有点不一致，因此您可能需要进行一些测试并对其进行调整才能获得不错的结果。通常 scope=row/col 就足够了，但是 headers/id 像您一样用于多个 header。

如果你的第一个单元格是 th，给它一个 scope="row" 只是为了将它与其他 th 元素区分开来。例如

<thead>
  <tr><th id="feature">Feature</th><th>Category</th><th>B</th><th>P</th></tr>
</thead>
<tbody>
  <tr><th id="baseline" col-span="4">Baseline</th></tr>
  <tr><th scope="row" headers="baseline feature">Account activity</th><td>Accounts</td><td>59%</td><td>34%</td></tr>
 ...
</tbody>

你可以在这里看到更详细的解释：http://webaim.org/techniques/tables/data

在 table 中对标题进行分组的 HTML5 标记是什么？

What HTML5 markup for grouping headings in a table?

html

html-table

accessibility

semantic-markup