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 artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器"><img src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="overflowclass">HTML汇报生成器</a> <p class="overflowclass">🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p> </div> <a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" 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> -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
