具有三级标题的复杂表的 Colgroup

如何解决具有三级标题的复杂表的 Colgroup

给定一个这样的表：

（HTML 代码）：

<table>
  <thead>
    <tr>
      <th>H1-A</th>
      <th colspan="3">H1-B</th>
      <th colspan="3">H1-C</th>
    </tr>
    <tr>
      <th>H2-A</th>
      <th colspan="2">H2-B</th>
      <th>H2-C</th>
      <th colspan="3">H2-D</th>
      <th colspan="3">H2-E</th>
    </tr>
    <tr>
      <th height="10">H3-A</th>
      <th>H3-B</th>
      <th>H3-C</th>
      <th>H3-D</th>
      <th>H3-E</th>
      <th>H3-F</th>
      <th>H3-G</th>
      <th>H3-I</th>
      <th>H3-J</th>
      <th>H3-K</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
  </tbody>
</table>

是否可以使用 colgroup-tag 来标记此表的标题？换一种方式：

colgroups 可以用于多行标题吗？

出于可访问性目的，我需要标记标题，鉴于标题属性似乎具有 poor screenreader-support

，这似乎是此类表的唯一选项

解决方法

我的理解是，您可以使用“colgroup”元素来标识列组，但不能用它们指定此标题结构，因为“colgroup”元素不能包含其他“colgroup”元素。

我的实验使我得出结论，屏幕阅读器的支持比您描述的更糟糕：支持很差，不仅对“标题”属性而且对整个表格的支持都很差，除了最简单的表格，以及对于最简单的表，它甚至都不是很好。

更糟糕的是，有时屏幕阅读器确实会宣布单元格的标题，并会宣布错误的标题（当表格被正确标记时），导致用户认为某物属于一个类别，而实际上它属于另一类别.

如果我想在能力和辅助技术范围内提供可靠的可理解性，我可能会将数据呈现为表格，但我会以更广泛支持（尽管不那么简洁）的格式再次呈现相同的数据，例如标题和段落.

,

序言

这并不像我想象的那么直接，我尝试了许多技术，例如典型的 colgroup，然后我什至尝试了 headers attribute，它允许您通过身份证。

经过一番搜索后，我遇到了这个 example page where someone had tried 3 level column headers (example 3)，他们也遇到了类似的问题。

经过一些黑客攻击后，我确实设法获得了一些可行且看起来不错的东西，但它需要在其他屏幕阅读器中进行更多测试，因为我的 PC 上只有 NVDA 和 JAWS（并且没有时间以测试目前所有的浏览器屏幕阅读器组合）。

一个可能的解决方案

如果我不能让语义元素工作并且不能让 WAI-ARIA 工作，那么我会回到我们的老朋友 aria-hidden 和 visually hidden text。

我所做的是对屏幕阅读器完全隐藏表格中的前两个标题行，然后使用视觉隐藏的文本将信息添加回第 3 级标题。

例如，对于第 10 列，我在“H3-K”之前添加了“H1-C、H2-E”。

<th scole="col"><span class="visually-hidden">H1-C,H2-E,</span>H3-K</th>

通过这种方式，屏幕阅读器用户可以有效地看到一个普通的 10 列表格，该表格易于导航，但所有相关的标题信息都会被读出。

例如第一个单元格被读取为

第2行H1-A、H2-A、H3-A第1列数据1a

您显然希望构建一些解决方案（最好在服务器上，但在紧要关头使用 JS 也可以接受），自动执行此操作以避免犯任何错误。

这不是一个理想的解决方案，但这是我能想到的最好的解决方案，也是我会做的，因为至少所有相关信息都会呈现给屏幕阅读器用户。

警告：如果我可以自动化流程，我只会使用该解决方案，如果我不能为每一列自动生成视觉隐藏的文本，我将不做任何事情 并保持桌子原样，因为这里的错误可能比单独离开桌子更不容易发生。

示例

table{
    width: 100%;
}
th{
   text-align: center;
}
th,td{
    border: 1px solid #333;
}

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6,IE7 - a 0 height clip,off to the bottom right of the visible 1px box */
    clip: rect(1px,1px,1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers,clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<table>
  <thead>
    <tr aria-hidden="true">
      <th colspan="4">H1-A</th>
      <th colspan="3">H1-B</th>
      <th colspan="3">H1-C</th>
    </tr>
    <tr aria-hidden="true">
      <th>H2-A</th>
      <th colspan="2">H2-B</th>
      <th>H2-C</th>
      <th colspan="3">H2-D</th>
      <th colspan="3">H2-E</th>
    </tr>
    <tr>
      <th scole="col" height="10"><span class="visually-hidden">H1-A,H2-A,</span>H3-A</th>
      <th scole="col"><span class="visually-hidden">H1-A,H2-B,</span>H3-B</th>
      <th scole="col"><span class="visually-hidden">H1-A,</span>H3-C</th>
      <th scole="col"><span class="visually-hidden">H1-A,H2-C,</span>H3-D</th>
      <th scole="col"><span class="visually-hidden">H1-B,H2-D,</span>H3-E</th>
      <th scole="col"><span class="visually-hidden">H1-B,</span>H3-F</th>
      <th scole="col"><span class="visually-hidden">H1-B,</span>H3-G</th>
      <th scole="col"><span class="visually-hidden">H1-C,</span>H3-I</th>
      <th scole="col"><span class="visually-hidden">H1-C,</span>H3-J</th>
      <th scole="col"><span class="visually-hidden">H1-C,</span>H3-K</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data 1a</td>
      <td>data 2a</td>
      <td>data 3a</td>
      <td>data 4a</td>
      <td>data 5a</td>
      <td>data 6a</td>
      <td>data 7a</td>
      <td>data 8a</td>
      <td>data 9a</td>
      <td>data 10a</td>
    </tr>
    <tr>
      <td>data 1b</td>
      <td>data 2b</td>
      <td>data 3b</td>
      <td>data 4b</td>
      <td>data 5b</td>
      <td>data 6b</td>
      <td>data 7b</td>
      <td>data 8b</td>
      <td>data 9b</td>
      <td>data 10b</td>
    </tr>
  </tbody>
</table>