headers属性是保障复杂表格无障碍访问的关键手段，必须配合正确id使用，通过空格分隔多级表头id，且不可与scope或aria-labelledby混用。
headers 属性是让屏幕阅读器准确播报复杂表格中单元格上下文的唯一可靠手段，不是锦上添花，而是防止“读出数字却不知代表什么”的关键防线。
为什么 scope 失效时必须用 headers
当表格出现 rowspan、colspan、多级表头（比如“地区”下再分“华东”“华北”）、或表头不在标准行列位置时，scope 就完全无法表达一个 <td> 实际归属的多个维度。屏幕阅读器只能靠猜测，结果常是只读“第2行第3列：85”，漏掉“销售额”“2024年Q3”“华东区”这些关键语义。
<ul>
<li>
<code>scope 只能声明单向关系（col 或 row），不能同时覆盖行+列+父级总表头
scope 依赖 DOM 位置，一旦用 CSS 或 JS 打乱结构（如虚拟滚动、条件渲染），它就彻底失效scope 的支持已稳定，但它的能力边界非常明确——简单表可用，复杂表必败headers 必须配 id 才生效，常见断连原因
headers 不认 class、不读文本、不猜位置，只严格匹配 <th> 上真实存在的 <code>id 字符串。大小写、空格、拼写错一个，关联就静默失效。
-
<th>姓名</th>没写id，光在<td headers="name"> 里写，等于没写 <li> <code><th id="Name">姓名</th>和<td headers="name"> 大小写不一致 → 断连 <li> <code><th id="name dept">部门</th>——id含空格非法，浏览器直接忽略该id - React/Vue 动态渲染时，
<th id="q1"> 还没挂载，<code><td headers="q1"> 已输出 → 首次无障碍树无关联 <h3>多级表头怎么写 headers 值才对</h3> <p>一个 <code><td> 同时属于“年份”“季度”“城市”三个维度，<code>headers值必须是"year q1 beijing"这样空格分隔的字符串，其他写法全无效。- 逗号分隔：
headers="year,q1,beijing"→ 浏览器当做一个 ID 查找，找不到 - 引号包裹：
headers=""year" "q1" "beijing"→ 引号成为 ID 字符一部分，查不到目标 - 漏写任一 ID：
headers="year q1"而漏了beijing→ 屏幕阅读器只读前两个，语义不全 - 顺序影响播报流：
headers="q1 year beijing"会先读“Q1”，再“年份”，再“北京”，语义连贯性可能被破坏
headers 和 scope / aria-labelledby 别混用
headers和scope是互斥关系：只要<td> 上写了 <code>headers，scope就被完全忽略。WAI-ARIA 规范明确如此，不是互补，是替代。- 静态表格、DOM 结构稳定 → 优先用
headers+id - 动态列、虚拟滚动、表头不是
<th>（比如用 <code><div role="columnheader">）→ 改用 <code>aria-labelledby - 绝不要同时设
headers和aria-labelledby，后者会覆盖前者，导致语义丢失 - 别碰已废弃的
axis属性，所有现代读屏器都忽略它，且无校验机制
真正容易被跳过的细节是：
headers不是“写完就有效”，它依赖完整的 DOM 结构可达性——ID 写错一个字母、被条件渲染漏掉、服务端与客户端 ID 不一致，都会导致整个绑定静默失效，退化为无关联状态。 - 逗号分隔：
