如何配置JAWS使其读取列值前先朗读对应列标题（适配a11y需求）

嘿，这个情况我之前做类似产品对比页时也遇到过，给你几个实用的解决思路，从代码配置到JAWS设置都有：

• 确保HTML表格的无障碍标记绝对正确
  JAWS对标准HTML表格的表头关联依赖明确的属性，一定要给列表头设置id，然后每个单元格用headers属性绑定对应的表头ID。这也是苹果官网能让NVDA和JAWS都正确识别的核心原因之一。举个简单的示例：

  <table role="grid">
    <thead>
      <tr>
        <th id="model-1" scope="col">iPad Air</th>
        <th id="model-2" scope="col">iPad Pro 11英寸</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td headers="model-1">M1 芯片</td>
        <td headers="model-2">M2 芯片</td>
      </tr>
      <tr>
        <td headers="model-1">10.9英寸 Liquid 视网膜显示屏</td>
        <td headers="model-2">11英寸 Liquid 视网膜显示屏</td>
      </tr>
    </tbody>
  </table>
  

  这里的scope="col"明确告诉屏幕阅读器这是列表头，headers属性则直接把单元格和所属列的表头绑定，JAWS读取时就会自动关联并播报列标题。

• 调整JAWS的内置表格阅读设置
  如果代码没问题但JAWS还是不播报，可能是用户的JAWS默认设置关闭了这个功能。你可以指导客户或者测试时调整：

  1. 打开JAWS的设置中心（按下Insert+6或者通过任务栏图标进入）
  2. 找到「表格」相关的设置选项
  3. 勾选「读取单元格时包含列标题」（不同版本的JAWS可能命名略有差异，比如“在单元格前读取列标题”）
     不过这个是用户端的设置，优先建议从代码层面解决，避免依赖用户手动调整。

• 用ARIA属性补充关联（非标准表格场景）
  如果你的对比页不是用标准HTML表格实现的（比如用div模拟的布局），可以用aria-labelledby属性给每个特性单元格绑定对应的产品标题。例如：

  <div class="product-column">
    <h3 id="prod-air">iPad Air</h3>
    <div class="feature-item" aria-labelledby="prod-air">M1 芯片</div>
  </div>
  <div class="product-column">
    <h3 id="prod-pro">iPad Pro</h3>
    <div class="feature-item" aria-labelledby="prod-pro">M2 芯片</div>
  </div>
  

  这样JAWS读取每个feature-item时，会先播报aria-labelledby指向的产品标题。

• 测试最新版JAWS
  旧版本的JAWS对某些无障碍属性的支持可能不完善，建议用最新的稳定版JAWS测试，很多这类识别问题在新版本中都有修复。

另外，你可以用JAWS的无障碍验证工具（按下Insert+F12）检查页面的无障碍标记，看看有没有提示表头关联缺失的问题，能帮你快速定位问题所在。

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