时间戳

首页 > 解决方案 > Colgroup 用于具有三级标题的复杂表

html - 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 可以用于多行标题吗？

出于可访问性目的，我需要标记标题，这似乎是此类表的唯一选择，因为标题属性似乎具有较差的屏幕阅读器支持

标签： htmlhtml-tableaccessibilityweb-accessibility

解决方案

前言

这并不像我想象的那么简单，我尝试了许多技术，例如典型的colgroup，然后我什至尝试了headersattribute，它允许您通过 ID 定义标题。

经过一番搜索，我遇到了这个示例页面，其中有人尝试了 3 级列标题（示例 3）并且他们遇到了类似的问题。

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

一个可能的解决方案

与任何事情一样，如果我无法让语义元素发挥作用，也无法让 WAI-ARIA 发挥作用，那么我会求助于我们的老朋友aria-hidden和视觉上隐藏的文本。

我所做的是从屏幕阅读器完全隐藏表格中的前两个标题行，然后使用视觉隐藏的文本将信息添加回第 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, 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, H2-B,</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, H2-D,</span>H3-F</th>
      <th scole="col"><span class="visually-hidden">H1-B, H2-D,</span>H3-G</th>
      <th scole="col"><span class="visually-hidden">H1-C, H2-E,</span>H3-I</th>
      <th scole="col"><span class="visually-hidden">H1-C, H2-E,</span>H3-J</th>
      <th scole="col"><span class="visually-hidden">H1-C, H2-E,</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>

推荐阅读