无障碍适配：如何配置表格column header的屏幕阅读器播报规则

正确的配置方法如下：

• 优先使用原生HTML语义属性scope识别表头作用范围，不需要额外添加role="columnheader"。位于<thead>内的<th>添加scope="col"后，会被辅助设备明确识别为列表头，这是WAI-ARIA规范推荐的标准实现，兼容性远高于自定义role配置。
• 确认<table>标签没有被添加错误的role属性覆盖原生语义，比如role="presentation"、role="grid"等，原生<table>默认的role="table"是表头语义识别的基础。
• 如果是复杂多级表头场景，可以额外通过id+headers属性绑定表头和对应数据单元格，进一步提升兼容性。

正确的完整代码示例：

<table>
  <thead>
    <tr>
      <th id="col1" scope="col">Number</th>
      <th id="col2" scope="col">Name</th>
      <th id="col3" scope="col">Surname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="col1">1</td>
      <td headers="col2">John</td>
      <td headers="col3">Doe</td>
    </tr>
    ...
  </tbody>
</table>

补充说明：之前设置role="columnheader"未生效是因为该role仅适用于role="grid"/role="treegrid"组件场景，原生普通表格场景下不需要配置该属性，添加后反而可能干扰原生语义识别。上述配置完成后，主流屏幕阅读器（NVDA、VoiceOver、JAWS）都会按照预期播报「row 1 col 1 number 列表头」的对应内容。

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