HTML表格中数据项如何正确关联？这个问题其实非常关键。许多开发者在表格中使用了headers属性，却发现屏幕阅读器毫无反应，问题通常出在id上——它们必须成对出现才能生效。

headers属性必须与th的id协同工作

写了 headers="name" 却毫无效果？那很可能是因为 遗漏了 id，或者 id 的值不匹配。这个属性只认DOM里真实存在的 id 字符串，区分大小写和空格，class、文本内容以及 colspan 推断全都不起作用。

以下是几个容易踩坑的地方：

• 姓名 未添加 id，仅写 纯属徒劳
• 姓名 与 因大小写不同，关联将断裂
• 部门 中包含了空格，id 本身就不合法，headers 自然无法找到目标

多级表头用空格分隔id，而非逗号

如果一个数据单元格同时归属于“年份+季度+地区”三类表头，headers 的值应为 "year q1 beijing" 这种以空格分隔的字符串，而不是 "year,q1,beijing"，更不是 '"year" "q1" "beijing"'。浏览器只会按空格拆分整个属性值。

对应的结构必须确保每个 id 都真实存在且唯一：

• 年份
• Q1
• 北京
• 120——这才是正确的绑定方式

遗漏任何一个 id，或拼写错一个字母，屏幕阅读器要么只读出部分上下文，要么直接跳过表头。

headers和scope同时存在时，headers覆盖scope

WAI-ARIA 规范明确指出：只要 headers 存在，scope 就会被忽略。不少开发者以为两者可以互补，实际上它们是互斥的。

没必要为了“兼容旧读屏器”而额外添加 scope——现在的读屏器（NVDA、VoiceOver、JAWS 2022+）都支持 headers，且更准确。表格结构简单（单层行列）时，使用 scope 更轻量；一旦涉及多级分组或跨行跨列，headers 才是唯一可靠的方式。

动态渲染时特别需要注意： 必须在 渲染之前就已经挂载到DOM上，否则首次无障碍树建立时无法关联，而且不会出现任何报错提示。

别用axis，它已被HTML5正式弃用

axis 在所有现代可访问性链路中已经失效。W3C 明确将其标记为过时，Chrome、Firefox、Safari 虽然不报错，但 NVDA、VoiceOver、JAWS 全都忽略它。更麻烦的是，axis 的值没有校验，axis="sales,q1" 和 axis="sales q1" 都算合法，但辅助技术根本无法解析。

如果看到老项目中还保留着 axis，直接删除，替换为 headers 或 aria-labelledby：

• 静态表格、DOM结构稳定 → 优先使用 headers
• React/Vue 动态列、虚拟滚动、表头不是 元素 → 改用 aria-labelledby，指向带 role="columnheader" 的元素
• 切勿同时设置 headers 和 aria-labelledby，后者会覆盖前者，导致语义丢失

ID 写错一个字母、被条件渲染遗漏、服务端与客户端渲染 ID 不一致——这些都会导致语义链断裂，而且没有任何提示。最容易忽略的，从来不是语法，而是DOM的可达性本身。