scope="colgroup"必须配合<colgroup>才生效,否则屏幕阅读器无视;多级列头中子级须显式设scope="col";rowspan表头必须设scope;scope不支持多值,应改用headers+id。

scope="colgroup"必须配合才生效
很多人写了scope="colgroup"却没加<colgroup></colgroup>,结果屏幕阅读器完全无视——它不是“语义开关”,而是结构契约。浏览器只在<colgroup></colgroup>真实存在且<th scope="colgroup"></th>位于其覆盖列范围内时,才认可这个作用域声明。
- 错误写法:
<th colspan="4" scope="colgroup">2024年</th>(无<colgroup></colgroup>) - 正确写法:先定义
<colgroup span="4"></colgroup>,再让<th scope="colgroup">2024年</th>出现在对应列位置 - 旧版 JAWS 会直接跳过没配
<colgroup></colgroup>的scope="colgroup",连警告都不报
多级列头里子级必须用scope="col",不能继承父级
“年份 → 季度 → 月份”这种三级结构,顶层scope="colgroup"只管组,中间和底层必须各自声明scope="col"。屏幕阅读器不递归推导,它只认当前<th>的<code>scope值和 DOM 位置。
- 第二行的
<th scope="col">Q1</th>必须显式写,不能指望上层<th scope="colgroup">2024年</th>自动覆盖 - 如果漏掉某一个
scope="col",该列所有<td>将失去列归属,读屏时只报数值,不报“Q1销售额” <li>动态渲染时别用“父级有scope就跳过子级”逻辑——每个<code><th>都要独立判断并设置 <h3>当表头同时承担行列角色时,scope完全失效</h3> <p>左上角单元格(第1行第1列)既要管列又要管行?<code>scope不支持多值,硬写scope="row col"是非法语法,浏览器会忽略整个属性。此时唯一解法是弃用scope,改用headers+id。- 给列头加
id="month",行头加id="product" - 数据单元格写
<td headers="month product">1200</td>(空格分隔,不是逗号) -
headers优先级永远高于scope,一旦出现,scope被彻底绕过
rowspan超过1的表头必须显式设scope,哪怕只是2
哪怕只是
rowspan="2"的列标题,不加scope="col",屏幕阅读器大概率把第二行数据全算作第一行表头的下属,漏掉真正的列关系。这不是“建议”,是 HTML5 规范强制要求的语义绑定。立即学习“前端免费学习笔记(深入)”;
- 错误:
<th rowspan="2">销售额</th> - 正确:
<th rowspan="2" scope="col">销售额</th> -
scope写在<td>上无效——HTML5 明确禁止,所有浏览器都会静默丢弃 真正容易被忽略的是:只要表格用了<code>rowspan或colspan,哪怕只有一处,你就已经跨过了scope的适用边界;此时该立刻切换到headers+id方案,而不是试图用scope="colgroup"打补丁。
- 给列头加



















