HTML5中<caption>标签仅用于表格标题，非摘要；真正摘要需用aria-describedby关联外部div或<details><summary>等现代方案，废弃summary属性和title。
HTML5 中并没有 <caption> 标签的“总结性文字摘要”这一语义扩展功能；它仅用于为表格提供简明标题（title），而非摘要（summary）或描述性说明。真正承担“摘要”职责的是 summary 属性（已废弃）和现代替代方案：ARIA 属性与辅助文本组合。
caption 标签的真实作用与写法
<caption> 是 <table> 的第一个子元素，用于说明表格主题，应简洁、居中显示在表格上方（默认样式）。它不是摘要，不替代对数据逻辑、来源、统计口径等的解释。
- ✅ 正确用法：
<caption>2024年Q1各区域销售额（单位：万元）</caption> - ❌ 错误预期：不要在里面写“本表汇总了6个大区共127条销售记录，含退货调整项…”这类长摘要
- ⚠️ 注意：屏幕阅读器会将 caption 读作“表格：……”，是用户定位表格的第一线索，需准确反映核心内容
为复杂表格提供真正摘要的现代方案
当表格结构嵌套深、含多维分组、需解释计算逻辑或数据局限时，应使用以下组合方式，而非强求 caption 承担摘要功能：
- 在 caption 下方添加 <details> + <summary>：提供可折叠的详细说明，兼顾简洁与扩展性
- 用 aria-describedby 关联外部 <div>：将摘要文本放在表格外，通过 ID 关联，确保屏幕阅读器可读
- 结合 <figure> + <figcaption>：若表格作为独立数据图示（如统计图表的源数据表），可用 figure 包裹，figcaption 作标题，再加段落作摘要
实操示例：带摘要的合规复杂表格
以下代码实现语义清晰、可访问、符合 WCAG 的复杂表格呈现：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
<figure>
<table id="sales-table" aria-describedby="sales-summary">
<caption>2024年第一季度分渠道销售达成率</caption>
<!-- 表格内容（thead/tbody等） -->
</table>
<figcaption>表：按线上、线下、直营、加盟四类渠道统计目标完成情况</figcaption>
<div id="sales-summary">
<p>摘要：数据截至2024-03-31，不含4月调账；加盟渠道达成率=实际回款/签约目标，未扣除跨期退款。线下渠道含体验店与标准门店合并计算。</p>
</div>
</figure>这样既保持 caption 简洁，又通过 aria-describedby 让辅助技术把摘要作为表格的补充说明一并朗读。
为什么不推荐用 summary 属性或 title？
summary 属性曾用于表格摘要，但 HTML5 明确废弃，主流屏幕阅读器已不再支持；title 属性虽能显示工具提示，但不可键盘访问、不被所有读屏软件识别，且无语义含义。二者均不符合当前可访问性标准（WCAG 2.1+）。
