scope属性是屏幕阅读器理解表格结构的唯一依据，必须显式声明：列标题用scope="col"，行标题用scope="row"；带rowspan/colspan的th须显式设scope；复杂结构须改用headers+id绑定。

scope 属性不是“设范围”的开关，而是告诉屏幕阅读器“这个 <th> 管哪一列、哪一行”，填错或漏填，视障用户就听不到正确上下文。它不靠视觉位置自动推断，必须显式声明。 <h3>列标题一律用 <code>scope="col"

只要 <th> 出现在 <code><thead> 里，且对应下方一整列数据（比如“姓名”“年龄”“城市”），就必须写 <code>scope="col"。哪怕它跨了多行（rowspan="2"），只要逻辑上还是列头，就不能改成 scope="row" 或留空。

• 错误写法：<th>姓名</th>（没 scope）→ NVDA 会读成孤立词，不关联下面的 <td> <li>错误写法：<code><th scope="column">姓名</th>（非法值）→ 浏览器忽略，axe 工具直接报错
• 正确写法：<th scope="col">姓名</th> → 无障碍树中识别为 columnheader 角色

行标题只在 <tbody> 首列用 <code>scope="row"

<th> 在 <code><tbody> 某行最左侧，用于说明该行其他 <code><td> 含义（如“张三”“华东区订单”），才用 <code>scope="row"。它只管本行右侧所有 <td>，不跨行。 <ul><li>不能写在 <code><thead> 或 <code><tfoot> 里——<code>scope="row" 在这些区域无效

动态渲染时别只看 index === 0 就加 scope="row"；得确认它真是行标题，而不是某列的二级表头

如果该行首列 <th> 还带 <code>colspan="3"，说明它不是普通行标题，应改用 scope="rowgroup" + <tbody> 内部结构（见下一条） <h3> <code>scope="rowgroup" 必须在 <tbody> 内，且配 <code>rowspan

当你要给一组连续的数据行打个总标签（如“华北区”统管下面 5 行），这个 <th> 必须放在 <code><tbody> 里，并显式写 <code>rowspan="5"，同时加 scope="rowgroup"。它不是“视觉分组”，而是语义绑定信号。

• 典型错误：<thead><tr><th scope="rowgroup">汇总</th></tr></thead> → 完全被忽略，因为 <thead> 不构成行组容器 <li>正确结构：<code><tbody> <tr><th scope="rowgroup" rowspan="5">华北区</th></tr> <tr><td>北京</td></tr>...</tbody>
• 老旧 JAWS 版本可能不播报“进入行组”，但 DOM 中父子关系能被解析工具识别；关键场景建议用 headers + id 回退

复杂表格别硬套 scope，优先用 headers + id

只要出现 rowspan > 1 且 colspan > 1 的合并单元格，scope 就无法准确表达管辖关系。强行用会导致读屏错乱（比如把第三行数据全归到第一列下）。


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• 正确做法：拆开合并单元格，每个语义明确的 <th id="q1-sales">、<code><th id="q1-ops"> <li>每个 <code><td> 显式写 <code>headers="q1-sales q1-ops"，列出它归属的所有表头 ID
• headers 优先级高于 scope，W3C 标准支持稳定，是复杂表格唯一可控的兜底手段

最难的不是记住四个取值，而是在每次写 <th> 时条件反射问一句：“它管的是列，还是行？”——这个判断一旦出错，后续所有无障碍测试都会失效。多级表头、动态列、右对齐标题等场景，<code>scope 往往只是起点，真正要靠 id 和 headers 把关系钉死。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！