scope="colgroup"在<th>上实际无效，W3C规范要求其必须与<colgroup>结构严格对应，但主流屏幕阅读器均忽略该值；可靠方案是用colspan跨列标题配合下方带scope="col"的子标题，必要时通过headers+id显式绑定。
scope="colgroup" 在 <th> 上根本无效
scope 属性的合法值只有 row、col、rowgroup、colgroup，但浏览器和屏幕阅读器**不支持**在 <th> 上设 scope="colgroup" 来关联多列。W3C 规范明确要求：scope="colgroup" 只能用于 <thead> 或 <tbody> 中的 <th> 且该 <th> 必须是 <colgroup> 的**直接语义对应者**——而实际上，HTML 没有机制让单个 <th> 覆盖多个 <col> 并被正确解析为列组表头。
真正可行的多列语义化表头方案
要让“销售额（Q1–Q4）”这类跨列标题被屏幕阅读器准确朗读为“销售额，季度一至季度四”，必须用结构而非 scope：
- 用
<colgroup>+<col>显式声明列组，但注意：<col>本身不能放文本或scope - 把多列标题放在
<thead>的第一行，用colspan跨列，并确保它下方有对应数量的单列<th>（带scope="col"） - 必要时用
id+headers显式绑定：给每列<th>设id，给跨列<th>设headers="q1 q2 q3 q4"
示例片段：
<table>
<colgroup>
<col><col span="4">
</colgroup>
<thead>
<tr>
<th rowspan="2">产品</th>
<th colspan="4" id="sales">销售额</th>
</tr>
<tr>
<th scope="col" headers="sales">Q1</th>
<th scope="col" headers="sales">Q2</th>
<th scope="col" headers="sales">Q3</th>
<th scope="col" headers="sales">Q4</th>
</tr>
</thead>
<tbody>
<tr><td>A</td><td>100</td><td>120</td><td>95</td><td>130</td></tr>
</tbody>
</table>
为什么 scope="colgroup" 看似合理却不能用
表面上看，colgroup 是列组容器，scope="colgroup" 像是自然匹配。但问题在于：
立即学习“前端免费学习笔记（深入）”；
- 所有主流屏幕阅读器（NVDA、JAWS、VoiceOver）都忽略
scope="colgroup"，不将其作为有效语义信号 -
<colgroup>是纯样式/结构辅助元素，不参与可访问树构建；它没有 DOM 文本内容，无法被关联为“表头” - ARIA 规范也未定义
aria-colcount或类似属性来补救，唯一可靠路径是显式headers绑定或嵌套<th>结构
容易被忽略的兼容性细节
即使结构写对了，以下三点仍会导致语义失效：
- 省略
scope="col"在子<th>上：某些旧版 JAWS 版本依赖它触发列上下文播报 -
headers值里 ID 之间用了空格以外的分隔符（如逗号或顿号），会导致绑定失败 - 跨列
<th>和下方单列<th>的列数不严格一致（例如colspan="4"但只写了 3 个子<th>），会破坏行列映射关系
多列表头的语义不是靠一个属性搞定的，而是靠整套结构对齐——漏掉任意一环，屏幕阅读器就只能读出孤立的“Q1”，而不会说“销售额 Q1”。
