headers属性必须配合th的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"都能匹配成功，但NVDA/VoiceOver会严格按空格分隔顺序依次读出每个<th>文本 <h3>父子表头别在td里重复写父级id</h3> <p>多层表头本质是语义链，不是并列拼接。例如「季度」下分「Q1/Q2」，正确做法是逐级建立关联：</p> <ul> <li>顶层：<code><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同时存在时，headers完全覆盖scope。WAI-ARIA规范明确规定：只要<td>上有<code>headers，scope就被完全忽略。这不是互补，而是替代。混用只会增加冗余，还容易误导调试方向。调试时打开 Chrome DevTools 的 Accessibility 面板，检查 “Related headers” 是否列出全部预期
id。重复id或缺失id会导致整个headers绑定静默失效，退化为无关联状态。真正容易被跳过的细节是：
headers不是“写完就有效”，它依赖完整的 DOM 结构可达性——id写错一个字母、被条件渲染漏掉、服务端与客户端渲染时机不同，都可能导致首次加载时语义链断裂。 -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
