headers属性必须配合th元素的id使用才能生效，仅写headers="name"无效；它通过id精确匹配表头，建立语义关联供辅助技术识别，不控制样式或布局。
headers属性必须配合id使用才能生效
单独写 headers="name" 没用，浏览器根本找不到对应表头——它只认 id，不认 class 或文字内容。表头单元格（<th>）必须显式带 <code>id，且值与 headers 属性完全一致（大小写敏感、空格敏感）。
-
<th id="age">年龄</th>和<td headers="age">28</td>才算配对成功 - 多个表头关联用空格分隔：
headers="name age dept"，对应三个<th id="..."> <li>如果 <code>id重复或不存在，headers就被忽略，屏幕阅读器不会读出关联信息 - 视觉上仍靠
colspan/rowspan或 CSS Grid 控制跨列/跨行显示 - 不能用
headers替代scope来简化单层表头——scope更轻量、更常用 - 复杂多维表（比如带行列汇总的财务表）才真正需要
headers，普通列表型表格用scope足够 - 调试时可检查
Accessibility面板（Chrome DevTools），看 “Related headers” 是否列出预期的id - 别为了“兼容旧读屏器”而乱加
scope——现代读屏器（NVDA、VoiceOver、JAWS 2022+）都支持headers，且更准确
headers只在语义化表格中起作用，不是视觉控制手段
它不改变样式、不影响布局、不触发CSS选择器（th[id="name"] + td[headers~="name"] 这种写法无效）。它的唯一作用是建立 DOM 节点间的语义关系，供辅助技术（如读屏软件）理解“这个数据单元格属于哪几个表头”。
headers和scope同时存在时，headers优先级更高
当一个 <td> 同时有 <code>headers 和 scope，浏览器和读屏软件会忽略 scope，只按 headers 指向的 <th id> 列表解析归属关系。
<ul>
<li>这是 WAI-ARIA 规范明确规定的优先级：显式 <code>headers > 隐式 scope
常见错误：headers指向了非元素或隐藏表头
headers 只应指向 <th>，哪怕它被 <code>display: none 或 aria-hidden="true" 隐藏，只要 DOM 中存在且有 id，读屏器仍会读出其文本内容——这常导致重复播报或逻辑混乱。
- 避免把
headers 指向 <div id="name"> 或 <code><span id="age"></span>，即使它们视觉上像表头
- 隐藏表头应移除
id，或改用 aria-label 在 <td> 上直接说明，而不是依赖隐藏 <code><th>
<li>动态渲染表格时，确保 <code><th id> 在 <code><td headers> 渲染前已挂载到 DOM，否则首次读取可能失败
实际用起来最易忽略的点：headers 不是“写完就有效”，它依赖完整的 DOM 结构可达性。ID 写错一个字母、</td>
<th> 被条件渲染漏掉、服务端渲染和客户端渲染 ID 不一致——这些都会让语义链断裂，且没有任何报错提示。</th>
headers 只应指向 <th>，哪怕它被 <code>display: none 或 aria-hidden="true" 隐藏，只要 DOM 中存在且有 id，读屏器仍会读出其文本内容——这常导致重复播报或逻辑混乱。
- 避免把
headers指向<div id="name"> 或 <code><span id="age"></span>，即使它们视觉上像表头 - 隐藏表头应移除
id，或改用aria-label在<td> 上直接说明，而不是依赖隐藏 <code><th> <li>动态渲染表格时，确保 <code><th id> 在 <code><td headers> 渲染前已挂载到 DOM，否则首次读取可能失败 实际用起来最易忽略的点：headers 不是“写完就有效”，它依赖完整的 DOM 结构可达性。ID 写错一个字母、</td> <th> 被条件渲染漏掉、服务端渲染和客户端渲染 ID 不一致——这些都会让语义链断裂，且没有任何报错提示。</th>
