caption是屏幕阅读器进入表格时唯一能第一时间抓取的上下文锚点，必须作为table的第一个子元素，内容具体且不可用css隐藏，与scope分工明确、缺一不可。
caption 不是“锦上添花”，而是屏幕阅读器进入表格时唯一能第一时间抓取的上下文锚点——没它，用户得手动遍历十几行才能猜出这张表在讲什么。
为什么不能用 summary 或普通标题替代 caption
summary 属性已在 HTML5 中被正式废弃，所有现代浏览器和主流屏幕阅读器（NVDA、JAWS、VoiceOver）都忽略它。用 <h2>学员成绩表</h2> 之类视觉标题更危险：它脱离 <table> 结构，屏幕阅读器无法建立语义绑定，用户听到“张三、HTML/CSS、22”时，根本不知道这组数据属于哪张表、哪个学期、哪类考核。
<ul><li>
<code>caption 必须作为 <table> 的**第一个子元素**，位置错（比如塞进 <code><thead> 里）等于不存在
<li>内容必须具体，避免“数据汇总”“信息表”等空泛表述；推荐格式：<code>2026年Q1前端班笔试成绩（含缺考标记）
caption（如 display: none），否则语义丢失；需视觉隐藏时用 visually-hidden 类
caption 和 scope 是分工明确的两层语义
scope 解决“这个单元格管哪一列/行”，caption 解决“整张表是干什么的”。两者缺一不可，但作用域完全不同：
- 没有
caption：屏幕阅读器用户进入表格后，第一句话是“表格，共3行4列”，然后直接跳到第一个<th>，毫无背景 <li>没有 <code>scope：用户知道这是张表，但听到“22”时，无法关联到“年龄”列或“张三”行 - 二者同时缺失：表格对屏幕阅读器而言，退化为一串无结构的文本流
- 正确做法：保留原业务语义的
caption，例如2026年Q1前端班笔试成绩 - 筛选控件本身用
aria-label="按姓名筛选"补充操作说明，不污染表格整体语义 - 若筛选条件显著改变数据范围（如“仅显示缺考人员”），可动态更新
caption文本，但必须通过 DOM 操作实时同步，不能只改视觉文案
带筛选行的表格，caption 仍要优先声明用途
很多人在表格顶部加一行搜索框，就顺手把 caption 改成“筛选表格”或干脆删掉——这是典型误判。筛选只是交互方式，不是表格本质：
真正容易被忽略的，是 caption 的位置刚性——它必须紧贴 <table> 开始标签，且不能被任何 wrapper 元素隔开。哪怕只多一个 <code><div>，语义链就断了。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
