如何正确处理无表头HTML表格的无障碍访问问题

问题原因 #

这不是VoiceOver的Bug，而是你的表格语义标记不完整导致的。辅助技术（如VoiceOver）依赖表格的表头（包括行表头和列表头）建立单元格的语义关联，你只定义了行表头（scope="row"的<th>），但缺少列的表头信息，导致VoiceOver无法正确识别每一列的含义，进而出现朗读混乱的情况。

修复方法：补充语义化列表头（视觉可隐藏） #

最简洁有效的方式是给表格添加列表头，即使视觉上不需要显示，也能让辅助技术正确解析。步骤如下：

1. 添加结构化表头 #

在表格中加入<thead>标签，定义列的语义（比如你的数据中，第二列是“占比”，第三列是“重量”）：

<table>
  <!-- 语义化列表头，视觉可隐藏 -->
  <thead>
    <tr>
      <th>项目名称</th>
      <th>占比</th>
      <th>重量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Main Value</th>
      <td></td>
      <td>100.21 g</td>
    </tr>
    <tr>
      <th scope="row">Sub Category 1</th>
      <td>58 %</td>
      <td>58.15 g</td>
    </tr>
    <tr>
      <th scope="row">Sub Category 2</th>
      <td>42 %</td>
      <td>42.08 g</td>
    </tr>
    <tr>
      <th scope="row">Additional Value</th>
      <td></td>
      <td>71 g</td>
    </tr>
  </tbody>
</table>

2. 视觉隐藏表头（可选） #

如果不需要在页面上显示表头，用CSS将其隐藏，但保留辅助技术的可访问性：

thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

替代方案：给单个单元格添加语义标签 #

如果不想添加表头，可以给每个<td>通过aria-label直接标注语义，但这种方式更繁琐，适合特殊场景：

<tr>
  <th scope="row">Sub Category 1</th>
  <td aria-label="占比">58 %</td>
  <td aria-label="重量">58.15 g</td>
</tr>

语义化结构建议 #

1. 是否用表格？：你的数据是典型的二维关联数据（项目-属性值），完全适合用表格，不需要拆分多个表格。拆分反而会破坏数据的关联性，不利于辅助技术解析。
2. 语义完整性：无论视觉是否需要，表格都应该包含完整的行/列表头，辅助技术依赖这些标记建立单元格的上下文关联。
3. 分组优化：如果数据有明显的逻辑分组（比如“主值”“子分类”“额外值”），可以用多个<tbody>标签区分，辅助技术会识别这些分组：

<table>
  <thead>...</thead>
  <tbody>
    <tr><th scope="row">Main Value</th><td></td><td>100.21 g</td></tr>
  </tbody>
  <tbody>
    <tr><th scope="row">Sub Category 1</th><td>58 %</td><td>58.15 g</td></tr>
    <tr><th scope="row">Sub Category 2</th><td>42 %</td><td>42.08 g</td></tr>
  </tbody>
  <tbody>
    <tr><th scope="row">Additional Value</th><td></td><td>71 g</td></tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Matty P