headers属性必须严格匹配th的id值，仅支持空格分隔的合法id字符串，大小写敏感、不可含空格或引号，且需在DOM挂载前存在；多级表头须逐级关联，不可重复父级id；headers启用后scope将被完全忽略。
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含空格非法，浏览器直接忽略该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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9263" title="Html2md">Html2md</a> <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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和scope不能混用，前者完全覆盖后者
WAI-ARIA规范明确规定：只要
<td>上有<code>headers，scope就被完全忽略。这不是互补，而是替代。立即学习“前端免费学习笔记（深入）”；
- 简单二维表（无合并、无多级）→ 只用
scope，轻量且足够 - 出现
rowspan/colspan、嵌套<thead>、跨<code><tbody>分组 → 必须统一用<code>headers，并删掉所有scope - 调试时打开 Chrome DevTools 的 Accessibility 面板，检查 “Related headers” 是否列出全部预期
id；重复id或缺失id会导致整个headers绑定静默失效
真正容易被跳过的细节是：
headers不是“写完就有效”，它依赖完整的 DOM 结构 ——<th id="xxx">必须在<code><td headers="xxx">挂载前已存在，且在同一<code><table>内、同一<code><thead>/<code><tbody>中。</tbody> -
