如何让包含独立分区的HTML表格具备无障碍访问性？

关于aria-describedby的适用性 #

用aria-describedby绑定数据行表头与分区标题的方法是可行的，但存在一定局限：

• 需要给每个分区标题设置唯一id，并确保数据行的<th scope="row">正确引用该id
• 部分屏幕阅读器可能会重复播报描述内容，造成信息冗余，需要实际测试验证效果
• 这种方式属于ARIA补充方案，原生HTML语义的实现会更稳定可靠

更优的无障碍优化方案 #

1. 用<tbody>对分区进行原生分组 #

HTML表格的<tbody>标签天然支持分组逻辑，每个分区用一个独立的<tbody>包裹，分区标题行放在对应<tbody>的开头，搭配scope="colgroup"和colspan属性明确语义：

<table>
  <caption>按类别分组的产品信息表</caption>
  <thead>
    <tr>
      <th scope="col">产品名称</th>
      <th scope="col">价格</th>
      <th scope="col">库存</th>
    </tr>
  </thead>
  <!-- 电子产品分区 -->
  <tbody>
    <tr>
      <th scope="colgroup" colspan="3">电子产品</th>
    </tr>
    <tr>
      <th scope="row">智能手机</th>
      <td>3999</td>
      <td>120</td>
    </tr>
    <tr>
      <th scope="row">笔记本电脑</th>
      <td>6999</td>
      <td>80</td>
    </tr>
  </tbody>
  <!-- 家居用品分区 -->
  <tbody>
    <tr>
      <th scope="colgroup" colspan="3">家居用品</th>
    </tr>
    <tr>
      <th scope="row">沙发</th>
      <td>2999</td>
      <td>30</td>
    </tr>
    <tr>
      <th scope="row">餐桌</th>
      <td>1599</td>
      <td>45</td>
    </tr>
  </tbody>
</table>

主流屏幕阅读器会自动识别<tbody>的分组，播报类似“进入电子产品分组”的提示，无需额外ARIA属性，语义更清晰。

2. 完善全局表头与表格说明 #

• 用<caption>标签明确表格的整体用途和分区逻辑，帮助用户快速理解表格结构
• 保留<thead>放置全局列标题，确保列的语义明确，和分区标题形成层级区分

3. 优化分区标题的语义标记 #

分区标题必须使用<th>元素（而非普通<td>加样式），并设置：

• scope="colgroup"：明确该表头对应整个列组（当前分区）
• colspan="N"：N为表格的总列数，确保视觉和语义上覆盖整个分区宽度

4. 多阅读器测试 #

不同屏幕阅读器（NVDA、VoiceOver、JAWS）对HTML语义和ARIA的支持存在差异，完成标记后务必在主流阅读器中测试，确保分区上下文能被正确播报。

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