headers属性必须配合th的id才能生效，仅写headers="name"无效；它严格按dom中id字符串精确匹配，大小写和空格敏感，不认class、文本或结构推断，多级表头须用空格分隔多个真实存在的唯一id。
headers属性必须配th的id才能生效
写了 headers="name" 却没读屏效果？大概率是 <th> 缺少 <code>id，或者 id 值不匹配。它只认 DOM 中真实存在的 id 字符串，大小写、空格全敏感，不认 class、不认文本内容、不认 colspan 推断。
常见错误包括：
-
<th>姓名</th>没加id，光写<td headers="name"> 是白搭 <li> <code><th id="Name">姓名</th>和<td headers="name"> 因大小写不一致断连 <li> <code><th id="name dept">部门</th>（含空格）导致 ID 非法，headers查不到目标 <th id="year" rowspan="2">年份</th><th id="q1" colspan="3">Q1</th><th id="beijing">北京</th>-
<td headers="year q1 beijing">120</td>——这才是正确绑定 - 静态表格、DOM 结构稳定 → 优先用
headers - React/Vue 动态列、虚拟滚动、表头非
<th> 元素 → 改用 <code>aria-labelledby，指向带role="columnheader"的元素 - 绝不同时设
headers和aria-labelledby，后者会覆盖前者，造成语义丢失
多级表头用空格分隔多个id，不是逗号
一个数据单元格同时属于「年份 + 季度 + 地区」三类表头时，headers 的值必须是 "year q1 beijing" 这样的空格分隔字符串，不是 "year,q1,beijing"，也不是 '"year" "q1" "beijing"'。浏览器只把整个属性值当字符串切分，只认空格为分隔符。
对应结构必须保证每个 id 都真实存在且唯一：
漏掉任一 id，或拼错一个，屏幕阅读器就只读出部分上下文，甚至完全跳过表头。
headers和scope同时存在时，headers会覆盖scope
WAI-ARIA 规范明确规定：只要 headers 存在，scope 就被忽略。很多开发者以为两者可以互补，实际是互斥。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
别为了“兼容旧读屏器”而乱加 scope——现代读屏器（NVDA、VoiceOver、JAWS 2022+）都支持 headers，且更准确。如果表格结构简单（单层行列），用 scope 更轻量；一旦涉及多级分组或跨行跨列，headers 才是唯一可靠手段。
动态渲染时尤其要注意：<th id="name"> 必须在 <code><td headers="name"> 渲染前已挂载到 DOM，否则首次无障碍树未建立关联，且没有任何报错提示。
<h3>别用axis，它已被HTML5正式弃用</h3>
<p><code>axis 在所有现代可访问性链路中都不起作用。W3C 明确标记为过时，Chrome/Firefox/Safari 虽不报错，但 NVDA、VoiceOver、JAWS 全部忽略它。更麻烦的是：axis 值无校验，axis="sales,q1" 和 axis="sales q1" 都算合法，但辅助技术根本无法解析。
如果你看到老项目里还留着 axis，直接删掉，换成 headers 或 aria-labelledby：
ID 写错一个字母、被条件渲染漏掉、服务端与客户端渲染 ID 不一致——这些都会让语义链断裂，且没有任何提示。最易忽略的点从来不是语法，而是 DOM 可达性本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
