headers属性只匹配同表内thead或tbody中显式设id的<th>，不跨表、不递归、不隐式查找；多层嵌套时需用aria-labelledby替代，因其支持跨层级引用任意带id元素。
headers 属性只认同级 thead 的 id，不跨层级也不递归查找
很多人以为 headers 会顺着 DOM 树向上找最近的 <th>，实际不是。它只匹配当前表格内、<thead>（或 <tbody> 中显式带 id 的 <th>）里定义的 id 值，且必须是同一 <table> 下——嵌套表格之间完全隔离。
常见错误现象：<td headers="col1"> 没效果，但检查发现 <th id="col1"> 在外层表的 <thead> 里，或在子表里却没设 id。
- 每个需要被引用的
<th>必须显式设置id，不能靠scope或位置隐式关联 - 子表格里的
<td>只能引用本表内的<th id="xxx">，哪怕结构看起来“属于”外层列 - 如果嵌套深（比如 table > tbody > tr > td > table > tr > td），外层
<th>的id对内层<td>无效
复杂嵌套时，用 aria-labelledby 替代 headers 更可靠
headers 在深层嵌套中失效的根本原因是作用域限制；而 aria-labelledby 是 ARIA 规范定义的通用属性，支持跨层级引用任意带 id 的元素（包括外层表头、甚至页面其他位置的说明文字）。
使用场景：子表格中某个 <td> 需要同时关联外层列名 + 当前子表行标题 + 单元格备注。
立即学习“前端免费学习笔记（深入）”；
-
aria-labelledby值是空格分隔的多个id，顺序即朗读顺序（如aria-labelledby="outer-col-1 inner-row-3 note-7"） - 所有被引用的
id必须存在且唯一，不能是动态生成后未同步更新的 - 比
headers兼容性更好（IE11+、所有现代屏读器均支持），但不会影响原生表格语义计算（如 Excel 导出仍依赖headers）
多层表头（rowspan/colspan）下 headers 的绑定必须手动拆解
当 <th> 跨多行多列时，它本身只有一个 id，但每个被它覆盖的 <td> 都需单独声明 headers 引用该 id——浏览器不会自动广播。
例如一个 <th id="sales-q1" colspan="3"> 下有三列数据，对应三个 <td>，每个都得写 headers="sales-q1"，不能只给第一个写。
- 漏写会导致部分单元格无表头关联，屏幕阅读器跳过或误读
- 若子表格也用了
colspan，其内部<th>的id仍只能被本层<td>引用 - 工具如 axe 或 WAVE 扫描时，会把未绑定
headers的<td>标为“缺少表头关联”
调试 headers 绑定是否生效的三个实操检查点
别只看 HTML 结构，真实效果取决于渲染后 DOM 和辅助技术行为。
- 用浏览器开发者工具选中
<td>，在 Accessibility 面板查看headers是否解析为有效节点（显示 “headers: th#xxx” 表示成功） - 用 NVDA 或 VoiceOver 开启表格导航模式（如 NVDA+Ctrl+方向键），停在目标
<td>时听是否读出预期表头文本 - 检查是否有重复
id——哪怕只在一个子表里重复，也会导致部分headers引用静默失败
深层嵌套表格的语义绑定从来不是“写完就对”，而是每层都要独立验证。最容易被忽略的是子表内 <th> 忘记加 id，或者误以为外层 id 能穿透作用域。
