scope 和 headers 是保障表格可访问性的关键防线，而非锦上添花；必须严格按位置设置 scope="col"/scope="row"，复杂结构需用 id+headers 显式绑定，caption 则是语义起点且不可省略。
scope 和 headers 不是“锦上添花”，而是让屏幕阅读器不把“85”读成“张三的第2列”这种错误的关键防线。
scope="col" 和 scope="row" 必须按位置硬写，不能靠猜测
浏览器和屏幕阅读器不分析视觉对齐或 CSS 位置，只认 scope 值和它在 DOM 中的实际位置：
<thead> 里第一行的 <code><th> —— 必须是 <code>scope="col"（比如<th scope="col">姓名</th>）<tbody> 里每行第一个 <code><th> —— 必须是 <code>scope="row"（比如<th scope="row">李四</th>）- 写反了（如把行标题写成
scope="col"），屏幕阅读器会把“李四”当成“第1列名”，后续读到“92”时就会说“李四：92”，而不是“英语：92” - 动态生成表格时，别用
i === 0统一加scope="row"——要区分是遍历行还是遍历列 - 给每个相关
<th> 加唯一 <code>id（如<th id="dept-header">部门</th>） - 在对应
<td> 上写 <code>headers="dept-header salary-header"（注意：空格分隔，不是逗号） <td> 上写 <code>scope是无效的，所有浏览器都会忽略，检测工具会直接报ARIA attribute is not allowed: scope- 不要指望视觉居中或缩进能“暗示”关系——屏幕阅读器只解析
headers值 - 必须紧贴
<table> 标签后，不能塞进 <code><thead> 或其他地方 <li>内容要具体，比如 <code><caption>2026年Q1前端班学员考核成绩</caption>，而不是“数据汇总” - 禁用已废弃的
summary属性，HTML5 不再支持 - 没有
<caption></caption>，辅助技术可能跳过整个表格上下文，尤其当页面有多个表格时
headers 属性是 scope 失效时的唯一补救手段
当出现 rowspan、colspan、多层表头或表头不在标准行列位置时，scope 就完全不够用了。这时必须用 id + headers 显式绑定：
caption 不是可选装饰，而是表格语义起点
<caption></caption> 是屏幕阅读器进入表格时最先读出的内容，它决定了用户是否继续听下去：
真正难的不是查文档写对 scope，而是在每次写 <th> 时下意识问一句：“它管的是上面一列，还是左边一行？”——这个条件反射比任何自动检测工具都管用。</th>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
