复杂嵌套网格中屏幕阅读器差异化表头读取方案咨询

核心思路 #

通过移除第一列表头的语义角色，同时显式关联第二列的表头与单元格，避免屏幕阅读器错误匹配表头，实现第一列表头不被读取、第二列表头正确关联的效果。

修改后的代码示例 #

<table>
  <thead>
    <tr>
      <!-- 第一列表头添加role="presentation"，移除表头语义，屏幕阅读器不再识别为表头 -->
      <th role="presentation">egg</th>
      <!-- 给第二列表头设置唯一ID，用于后续单元格关联 -->
      <th id="header-banana">banana</th>
    </tr>
    <tr>
      <th role="presentation">plant</th>
      <th id="header-tree">tree</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- 第一列单元格无需关联表头 -->
      <td tabindex="0">cat</td>
      <!-- 第二列单元格通过headers属性关联对应的两个表头ID -->
      <td tabindex="0" headers="header-banana header-tree">dog</td>
    </tr>
  </tbody>
</table>

原理说明 #

1. role="presentation"：为第一列的<th>添加该属性后，元素会失去表头的语义角色，仅作为普通视觉内容存在，屏幕阅读器不会将其识别为表头，自然不会读取或参与表头与单元格的关联逻辑。
2. id + headers 显式关联：为第二列的每个表头设置唯一id，再让对应单元格通过headers属性指定这些id，屏幕阅读器会准确读取关联的表头内容，彻底避免错误匹配第一列表头的问题。

预期屏幕阅读器输出 #

table
cat row 1 column 1
dog row 1 column 2 banana tree

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