JAWS18在IE11中无法读取表格表头的问题排查与替代方案咨询

这个问题我之前在无障碍测试里碰到过不少次，IE11搭配JAWS18确实是个头疼的组合🤦‍♂️，核心原因还是老环境的兼容性短板：

为什么会出现这个问题？ #

• IE11对ARIA的支持不完善：IE11本身对现代ARIA属性的支持就很有限，尤其是aria-label在<th>标签上的识别，JAWS18在IE环境下也不会强制解析这个属性，导致你加了也没用。
• JAWS18对IE的适配局限：JAWS18虽然支持Chrome等现代浏览器，但对IE11的适配停留在较旧的无障碍标准上，更依赖原生HTML的语义化标签，而非ARIA增强。

可行的替代方案 #

以下是经过测试有效的解决方法，优先级从高到低：

• 确保正确使用原生<th>+scope属性：
  不要只依赖<th>，一定要给每个表头加上对应的scope属性，比如列表头用scope="col"，行表头用scope="row"。原生语义化标签在老环境里的支持比ARIA稳定得多，示例代码：

  <table>
    <thead>
      <tr>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
      </tr>
    </tbody>
  </table>
  

• 使用id+headers关联单元格与表头：
  对于复杂表格（比如合并单元格的情况），可以给每个<th>设置唯一id，然后在对应的<td>上用headers属性关联，这种原生关联方式在IE11+JAWS18里能被正确识别：

  <table>
    <thead>
      <tr>
        <th id="name-header" scope="col">姓名</th>
        <th id="age-header" scope="col">年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td headers="name-header">张三</td>
        <td headers="age-header">25</td>
      </tr>
    </tbody>
  </table>
  

• 添加<caption>表格标题辅助识别：
  在表格开头添加<caption>标签，提供表格的整体说明，JAWS18在IE里会读取这个标题，帮助用户理解表格结构：

  <table>
    <caption>用户信息表</caption>
    <thead>
      <tr>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
      </tr>
    </thead>
    <!-- 表格内容 -->
  </table>
  

• 视觉隐藏的前置说明文本：
  作为最后兜底方案，可以在表格前添加一段视觉隐藏但屏幕阅读器可读取的文本，明确告知表格的表头信息：

  <span class="visually-hidden">这是用户信息表，包含姓名、年龄两列</span>
  <table>
    <!-- 表格内容 -->
  </table>
  

  这里的visually-hidden类需要用CSS实现：

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

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