CAPTION标签是为统计表格添加语义化标题的唯一正确方式，必须紧贴<table>标签后、首个<tr>或<thead>前；标题需包含时间、对象、指标、单位中至少三项，不可隐藏或脱离语义结构。
CAPTION 标签是为统计表格添加说明的唯一语义化方式，它不是装饰性文字，而是告诉用户“这张表在说什么”的关键信息。
必须放在正确位置才能生效
它得紧贴 <table> 开始标签之后、第一个 <tr> 或 <thead> 之前。放错地方（比如塞进 <thead> 里，或用 <div> 包在外面）会让屏幕阅读器完全读不到标题，浏览器也可能忽略渲染。
- ✅ 正确：
<table><caption>2024年各城市GDP增速（同比）</caption><thead>... - ❌ 错误：
<table><thead><caption>...</caption></thead>（结构非法） - ❌ 错误：
<div class="title">...</div><table>...（无语义，无障碍失效）
说明要具体，别写“统计表”这种空话
统计表格的标题应包含时间、对象、指标和单位四个要素中的至少三项，让视障用户和普通用户一眼就懂数据边界。
- 推荐写法：
<caption>北京市2023年12个区县PM2.5月均值（μg/m³）</caption> - 避免写法：
<caption>空气质量数据</caption>（太模糊） - 避免写法：
<caption>数值汇总</caption>（无实质信息）
样式可调，但别破坏语义
默认居中显示在表格上方，可用 CSS 调整位置和外观，但不能用浮动、绝对定位或隐藏它。
立即学习“前端免费学习笔记（深入）”；
- 移到下方：
caption { caption-side: bottom; } - 左对齐：
caption { caption-side: top; text-align: left; } - 加粗加大：
caption { font-weight: bold; font-size: 1.1em; color: #333; } - ❌ 禁止：
caption { display: none; }或position: absolute;（会切断可访问性链路）
复杂统计需要补充说明，但别塞进 CAPTION 里
CAPTION 只负责标题，不承担摘要功能。如果表格含特殊计算逻辑、数据来源限制或分组规则，应另用 aria-describedby 关联外部说明段落。
- 示例：
<table aria-describedby="gdp-note"><caption>2024年Q2省级GDP环比增速</caption>...</table> - 对应说明：
<p id="gdp-note" class="visually-hidden">注：本表不含港澳台地区；增速已剔除价格因素影响。</p> - 这样既保持标题简洁，又确保所有用户能获取完整上下文
