HTML 表格可访问性指南：caption、scope 和 headers 怎么用

表格可访问性的核心只有三件事：用 <caption> 给表格一个名字，用 scope 标记普通表头的方向，用 headers + id 处理合并单元格或多层表头这类复杂结构。三者是递进关系，不是三选一——简单表格写 scope 就够了，只有 scope 无法表达清楚关系时才上 headers。

caption 和 aria-label 有什么区别？该用哪个？

结论：<caption> 是表格的原生标题，会被屏幕阅读器在进入表格时首先播报，应当优先使用；aria-label 只能作为 caption 缺失时的补救手段。

<caption> 必须是 <table> 的第一个子元素，位置在 <colgroup>、<thead> 之前，DOM 顺序不能变。想让它显示在表格下方，用 CSS caption-side: bottom 调整，不要靠移动 DOM。

<table>
  <caption>2024 年各季度销售额（单位：万元）</caption>
  <thead>…</thead>
</table>

注意：不要用相邻的 <h3> 或 <p> 代替 caption。视觉上看着像标题，但屏幕阅读器不会把它和表格建立关联，用户跳转到表格时会丢失上下文。W3C 的 H39 技术就是专门讲"用 caption 关联表头与数据"的。

scope 有哪几个取值？什么时候必须写？

结论：scope 用在 <th> 上，取值为 row、col、rowgroup、colgroup 四种，简单表格（无合并单元格）里给每个 th 显式写上就能解决 90% 的问题。

• scope="col"：这个表头管它下面那一列
• scope="row"：这个表头管它右边那一行
• scope="rowgroup" / scope="colgroup"：管整个行组或列组，配合 <tbody>、<colgroup> 使用

浏览器和辅助技术对无 scope 的 <th> 有默认推测（列方向的 th 默认当列表头），但推测在多行表头场景下经常出错。显式写出来成本极低，收益确定。对应 WCAG 2.1 的 H63 技术。

headers 什么时候用？和 scope 冲突吗？

结论：当表格存在 rowspan、colspan，或者表头分成两三层时，用 headers 属性显式列出每个数据单元格对应的所有表头 id，此时 scope 表达不了这种一对多关系。

写法是给每个 <th> 加 id，然后在 <td> 上写 headers="id1 id2"，多个 id 用空格分隔，顺序按播报逻辑从左到右、从上到下排列。

<table>
  <caption>员工季度考核</caption>
  <tr>
    <th id="name" scope="col">姓名</th>
    <th id="q1" scope="col">Q1</th>
    <th id="q2" scope="col">Q2</th>
  </tr>
  <tr>
    <th id="zhang" scope="row">张三</th>
    <td headers="zhang q1">优秀</td>
    <td headers="zhang q2">良好</td>
  </tr>
</table>

屏幕阅读器读到"优秀"时会播报"姓名张三，Q1，优秀"，上下文完整。headers 和 scope 可以同时存在，headers 的优先级更高，但不要只写 headers 而不写 id——缺 id 引用会直接失效。

多层表头怎么处理？

结论：多层表头用 colspan 合并上层，再给上层 th 加 id、下层 td 用 headers 把所有祖先表头的 id 都列上。

两层表头里，最底层的单元格需要引用"上层分组表头 + 本列表头 + 本行表头"三类 id，漏掉任何一个，播报都会缺信息。三层以上建议直接拆表或改用列表结构，因为维护成本会超过收益。

表格可访问性最常见的错误有哪些？

结论：按出现频率排，前三名是——用 CSS 布局的 div 假表格、表头单元格写成 <td> 而不是 <th>、以及有合并单元格却只用 scope。

其余常见问题：caption 为空字符串、用 display: none 隐藏表头（屏幕阅读器也读不到）、给 <table> 加 role="presentation" 后忘了这是纯装饰表格才能用。检查方式很直接：把表格丢进 NVDA（Windows，免费）或 VoiceOver（macOS，Command + F5 开启）里逐格走一遍，听播报是否包含列名和行名。自动化方面，axe DevTools 和 Lighthouse 能查出"缺少 caption""th 未写 scope"这类问题，但合并单元格的语义错误仍需人工验证。

收个尾：<caption> 给表格命名，scope 处理行列方向，headers 处理复杂引用关系，顺序不能倒。判断标准就一句话——闭眼听一遍表格播报，如果每个数据单元格都能听出"它属于哪一行、哪一列"，可访问性就达标了。