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