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