caption标签是html5中专为表格设计的语义化标题元素，必须作为table的第一个子元素，用于提供清晰、可访问的表格描述，并需避免css隐藏以保障无障碍支持。
caption 标签是 HTML5 中专为表格设计的语义化标题元素，它天然支持无障碍访问，能让屏幕阅读器准确识别表格主题，比单纯用 <h3></h3> 或 CSS 隐藏文字更可靠、更标准。
正确放置 caption 标签
<caption></caption> 必须作为 <table> 的**第一个子元素**，紧接在 <code><table> 开始标签之后。放错位置（如放在 <code><thead> 内或表格末尾）会导致语义失效，屏幕阅读器可能忽略或误读。
<p>✅ 正确写法：</p>
<font size="2">
<table>
<br>
<caption>2024 年各季度销售额（单位：万元）</caption>
<br>
<thead>
<br>
<tr>
<th>季度</th>
<th>销售额</th>
</tr>
<br>
</thead>
<br>
<tbody>
<br>
<tr>
<td>Q1</td>
<td>125</td>
</tr>
<br>
<tr>
<td>Q2</td>
<td>142</td>
</tr>
<br>
</tbody>
<br>
</table></font>
<h3>用 caption 实现清晰、可访问的描述</h3>
<p>好的 caption 不只是“表格1”，而应说明表格内容、范围和单位，帮助视障用户快速理解上下文。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>包含关键信息：时间范围、地理范围、指标名称、计量单位（如“北京市2023年各区PM2.5月均值（μg/m³）”）</li>
<li>避免模糊表述：“数据汇总”“相关信息”不利于辅助技术解析</li>
<li>可含简短说明性短语，但不宜过长（建议控制在100字符内），必要时用 <code><details></details> 或 aria-describedby 补充细节
配合其他无障碍特性效果更佳
<caption></caption> 是起点，不是终点。要真正提升表格可访问性，还需协同以下做法：
- 为每列/行使用语义化
<th>，并设置 <code>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> ——屏幕阅读器仍可读取，视觉上不占位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
