复杂表格无障碍关键在真实语义结构：需用id+headers处理多级表头，必设具体caption，禁用td内heading，强制使用thead/tbody。
复杂表格的无障碍可访问性不是靠加几个 ARIA 属性就能糊弄过去的，关键在于结构语义是否真实、准确、可推导。如果表头关系模糊、跨行跨列逻辑混乱、或用 CSS 模拟表头，屏幕阅读器读出来的就是一串无上下文的数字和单词。
用 scope 明确单层表头归属关系
多数简单表格只需在第一行/第一列用 <th scope="col"> 或 <th scope="row"> 就能解决基本关联。但要注意：
-
scope只对紧邻的行或列生效，不能跨或嵌套层级- 若某列标题同时属于“地区”和“季度”，
scope无法表达这种二维归属，必须升级为id+headers- Chrome + NVDA 组合下，
scope="col"被跳过不读是常见 bug，建议始终配合id做兜底多级表头必须用
id和headers显式绑定当表格出现“2024年→Q1/Q2”这类嵌套标题时，仅靠视觉缩进或 colspan 是无效的。屏幕阅读器需要确切知道每个
<td>对应哪些表头：- 为每个
<th>设置唯一id，例如<th id="year">2024年</th>、<th id="q1">Q1</th> - 在数据单元格中用空格分隔多个
id：<td headers="year q1">120万</td> - 不要省略中间层级：如果“Q1”下还有“线上”“线下”子列，
headers必须包含year q1 channel全部三项，否则语义链断裂 - 避免用 JS 动态生成
headers值——首屏 HTML 必须静态存在，否则 SSR 或爬虫无法解析
<caption>不是可选项，而是表格语义起点<caption>是表格的“名字”，它决定屏幕阅读器如何归类这个结构。缺失或写成空值，会导致辅助技术把整张表当作无意义的数据块跳过：立即学习“前端免费学习笔记（深入）”；
-
<caption>必须是<table>的第一个子元素，且只能有一个 - 内容要具体，避免“数据汇总”“统计表”这类泛称，应写成
<caption>2024年华东区各渠道Q1销售额（万元）</caption> - 禁用已废弃的
summary属性；如需补充说明，用aria-describedby指向页面中一段<p id="sales-desc">…</p> - 不要用 CSS 把
<caption>隐藏（display: none或visibility: hidden），这会让其完全失效；如需视觉隐藏，用aria-hidden="true"+sr-only类替代
避免在
<td>中嵌套<h2>等 heading 元素HTML5 明确禁止
<h1>–<h6>作为<td>的直接子元素。强行嵌套不仅校验失败，还会让屏幕阅读器误判文档大纲层级：- 错误写法：
<td><h3>华北区</h3>120万</td>—— 这个<h3>不会被识别为父级<h2>的子节，而是孤立节点 - 正确做法：用
<section>包裹并重置语义上下文，例如<td><section><h1>华北区</h1><p>120万</p></section></td> - 轻量替代方案：用
role="group"+aria-labelledby，前提是已有对应id的描述文本，且不破坏原有 heading 层级 - 切记：heading 层级必须连续——若表格上方是
<h2>销售分析</h2>，单元格内就不能再用<h2>，哪怕加了<section>
最常被忽略的其实是
<thead>和<tbody>的强制使用。没有它们，scope和headers在部分旧版 JAWS 版本中会彻底失效；而手动写错id拼写或漏掉某个headers值，会导致整行数据失去上下文——这种问题在自动化测试里极难覆盖，只能靠人工逐单元格验证。 - 若某列标题同时属于“地区”和“季度”，
