caption标签是HTML5中专为表格设计的语义化标题元素，必须作为table的第一个子元素，用于提供清晰、可访问的表格描述，并需避免CSS隐藏以保障无障碍支持。
caption 标签是 HTML5 中专为表格设计的语义化标题元素，它天然支持无障碍访问，能让屏幕阅读器准确识别表格主题，比单纯用 <h3> 或 CSS 隐藏文字更可靠、更标准。
正确放置 caption 标签
<caption> 必须作为 <table> 的**第一个子元素**，紧接在 <table> 开始标签之后。放错位置（如放在 <thead> 内或表格末尾）会导致语义失效，屏幕阅读器可能忽略或误读。
✅ 正确写法：
<table><caption>2024 年各季度销售额（单位：万元）</caption>
<thead>
<tr><th>季度</th><th>销售额</th></tr>
</thead>
<tbody>
<tr><td>Q1</td><td>125</td></tr>
<tr><td>Q2</td><td>142</td></tr>
</tbody>
</table>
用 caption 实现清晰、可访问的描述
好的 caption 不只是“表格1”，而应说明表格内容、范围和单位，帮助视障用户快速理解上下文。
立即学习“前端免费学习笔记（深入）”；
- 包含关键信息：时间范围、地理范围、指标名称、计量单位（如“北京市2023年各区PM2.5月均值（μg/m³）”）
- 避免模糊表述：“数据汇总”“相关信息”不利于辅助技术解析
- 可含简短说明性短语，但不宜过长（建议控制在100字符内），必要时用
<details>或 aria-describedby 补充细节
配合其他无障碍特性效果更佳
<caption> 是起点，不是终点。要真正提升表格可访问性，还需协同以下做法：
- 为每列/行使用语义化
<th>，并设置scope属性（如scope="col"或scope="row"） - 复杂表格添加
aria-labelledby指向 caption 的 id，形成显式关联（虽非必需，但增强兼容性） - 避免仅靠视觉样式（如颜色、位置）表达结构；确保键盘用户可通过 Tab 导航到所有可交互单元格
不要用 CSS 隐藏 caption 来“省空间”
有些开发者为节省界面空间，用 display: none 或 visibility: hidden 隐藏 caption——这会直接移除其无障碍价值。如需视觉隐藏但保留语义，请改用无障碍友好方式：
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
然后：<caption class="visually-hidden">订单状态说明表</caption> ——屏幕阅读器仍可读取，视觉上不占位。
