scope属性必须严格按dom位置设置：col用于列头，row用于行头；合并单元格需显式声明scope；复杂结构改用id+headers；caption为必选语义锚点。
scope="col" 和 scope="row" 必须按 DOM 位置硬写，不能靠视觉或逻辑猜测
屏幕阅读器不分析表格的 CSS 样式、视觉对齐或 JS 渲染后的布局，只认 scope 值 + 它在 DOM 中的实际位置。写错位置，读出来就是错的归属关系。
<thead> 里的 <code><th> —— 必须用 <code>scope="col"（如<th scope="col">姓名</th>）<tbody> 每行第一个 <code><th> —— 必须用 <code>scope="row"（如<th scope="row">张三</th>）- 把
scope="row"错写成scope="col"，读屏会把“张三”当成列名，后续读到“92”就报“张三: 92”，而不是“数学: 92” - 动态生成时别用
i === 0统一加scope="row"——要判断当前是在遍历行头还是列头 -
<th colspan="2" scope="col">2026年Q1</th>—— 正确：明确告诉它是列头，且覆盖两列 -
<th rowspan="3" scope="row">前端组</th>—— 正确：明确它是行头，跨三行 - 漏掉
scope，即使视觉上对齐，读屏仍可能把该单元格当作普通文本，不参与行列映射 - 更危险的是：这类错误在 Lighthouse 或 axe 里通常不报红，但对视障用户是功能级缺失
- 给每个相关
<th> 加唯一 <code>id：<th id="dept-header" scope="col">部门</th> - 在对应
<td> 上用空格分隔多个 ID：<code><td headers="dept-header salary-header">前端 15k</td> <td> 上写 <code>scope是无效的，所有浏览器都会忽略，检测工具会直接报ARIA attribute is not allowed: scope- 不要依赖缩进、居中或 CSS 位置——读屏只解析
headers字符串值，哪怕 DOM 顺序乱了，只要 ID 对得上，播报就准 - 必须紧贴
<table> 开始标签，且为首个子元素：<code><table> <caption>2026年Q1考核成绩</caption> <thead>… <li>禁用已废弃的 <code>summary属性——HTML5 不支持，VoiceOver/NVDA 完全忽略，axe 直接报错 - 内容要具体，比如
<caption>前端班学员 JavaScript 考核成绩（含补考）</caption>，而不是 “数据汇总” - 没有
<caption></caption>，辅助技术可能跳过整个表格，尤其页面有多个表格时，用户根本不知道这是什么
真正难的不是查文档写对
带 rowspan/colspan 的 th 必须显式声明 scope，否则屏幕阅读器直接失效
一旦出现合并单元格，scope 就无法自动推断覆盖范围。浏览器不会“脑补”它管哪几列或哪几行，不写 scope，读屏就只能硬猜，结果大概率错。
复杂结构必须放弃 scope，改用 id + headers 显式绑定
当表格有嵌套表头、多层 <thead>、或某个 <code><td> 需同时归属多个表头时，<code>scope 完全不够用。此时唯一可靠方式是 id + headers。
caption 是语义起点，不是可选装饰，漏掉等于丢掉上下文
<caption></caption> 是屏幕阅读器进入表格时最先读出的内容，决定了用户是否继续听下去。它不是视觉标题，而是语义锚点。
scope，而是在每次敲下 <th> 时，下意识问一句：“它管的是上面一列，还是左边一行？”——这个条件反射比任何自动化检测工具都管用。</th>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
