headers属性必须配合th的id才能生效，缺一不可；常见错误包括id缺失或拼写不一致、大小写错误、id含空格非法、动态渲染未挂载、headers用逗号或引号分隔、漏写id及顺序影响语义连贯性。
headers属性必须配合th的id才能生效，缺一不可
写了headers="year q1 beijing">却没效果？大概率是<th>根本没设<code>id，或者id值拼写不一致。它只认id属性，不看class、不读文本内容、不靠位置推断——哪怕<th>2024年Q1</th>视觉上就在那，没id="q1"就等于不存在。
常见错误包括：<th id="Year">2024年</th>配headers="year"（大小写错）、<th id="q1 2024">Q1</th>（id含空格非法，浏览器直接忽略）、动态渲染时<th id="q1">还没挂载，<code><td headers="q1">已输出（首次无障碍树无关联）。
<h3>多级表头必须用空格分隔多个id，不能用逗号或引号</h3>
<p>一个<code><td>同时归属「年份 + 季度 + 地区」，<code>headers值必须是"year q1 beijing"这样的空格分隔字符串。浏览器只把空格当分隔符，其他写法全无效：
-
headers="year,q1,beijing"→ 解析失败，只当一个ID查找 -
headers=""year" "q1" "beijing"→ 引号被当作ID字符的一部分，查不到目标 - 漏掉任一id（比如只写
"year q1"而漏了beijing）→ 屏幕阅读器只读出部分上下文
顺序无关：headers="q1 year beijing"和headers="year q1 beijing"效果一样，但实际播报顺序按空格分隔顺序来，影响语义连贯性。
立即学习“前端免费学习笔记（深入）”；
父子表头不要强行让
多层表头本质是语义链，不是并列拼接。例如「季度」下分「Q1/Q2」，正确做法是逐级建立关联：
- 顶层：
<th id="quarter">季度</th>
- 中间层：
<th id="q1" headers="quarter">Q1</th>（显式声明它属于“季度”）
- 数据单元格：
<td headers="q1">120</td>（只直接关联q1，语义链自动成立）
不要写headers="quarter q1"：这会让读屏器重复读“季度 Q1 120,Q1 Q1 120”，造成冗余和混淆。父级表头的语义已通过中间层headers传递，无需在数据层重复。
headers和scope同时存在时，headers完全覆盖scope
WAI-ARIA规范明确规定：只要<td>上有<code>headers，scope就被完全忽略。这不是互补，而是替代。混用只会增加冗余，还容易误导调试方向。
调试时打开 Chrome DevTools 的 Accessibility 面板，检查 “Related headers” 是否列出全部预期id。重复id或缺失id会导致整个headers绑定静默失效，退化为无关联状态。真正容易被跳过的细节是：headers不是“写完就有效”，它依赖完整的 DOM 结构可达性——ID 写错一个字母、被条件渲染漏掉、服务端与客户端渲染 ID 不一致，都会让语义链断裂，且没有任何报错提示。
多层表头本质是语义链，不是并列拼接。例如「季度」下分「Q1/Q2」，正确做法是逐级建立关联：
- 顶层：
<th id="quarter">季度</th> - 中间层：
<th id="q1" headers="quarter">Q1</th>（显式声明它属于“季度”） - 数据单元格：
<td headers="q1">120</td>（只直接关联q1，语义链自动成立）
不要写headers="quarter q1"：这会让读屏器重复读“季度 Q1 120,Q1 Q1 120”，造成冗余和混淆。父级表头的语义已通过中间层headers传递，无需在数据层重复。
headers和scope同时存在时，headers完全覆盖scope
WAI-ARIA规范明确规定：只要<td>上有<code>headers，scope就被完全忽略。这不是互补，而是替代。混用只会增加冗余，还容易误导调试方向。
调试时打开 Chrome DevTools 的 Accessibility 面板，检查 “Related headers” 是否列出全部预期id。重复id或缺失id会导致整个headers绑定静默失效，退化为无关联状态。真正容易被跳过的细节是：headers不是“写完就有效”，它依赖完整的 DOM 结构可达性——ID 写错一个字母、被条件渲染漏掉、服务端与客户端渲染 ID 不一致，都会让语义链断裂，且没有任何报错提示。
