caption标签仅提供表格主题或目的的简洁标题,非摘要描述;应控制在15–25字内,明确主体与维度,避免冗余指代;详细摘要需用aria-describedby、h2或details等语义化方式实现。

caption 标签本身不能提供“摘要描述”,它只是为 <table> 元素定义可见的标题(通常显示在表格上方居中),其语义作用是说明表格的**主题或目的**,而非摘要内容。辅助设备(如屏幕阅读器)会将 <code><caption></caption> 作为表格的首要可访问标识读出,因此它必须简洁、准确、具有描述性——但不是“摘要”意义上的长篇概述。
caption 的核心可访问作用
屏幕阅读器在进入表格前,会自动朗读 <caption></caption> 内容,帮助用户快速判断“这个表格是关于什么的”。例如:
这比空 caption 或模糊的“数据表1”更具上下文意义。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
不要用 caption 替代摘要描述
若需提供更详细的背景、数据来源、统计方法或关键发现(即真正的“摘要描述”),不应塞进 caption,因为:
- caption 内容会作为视觉标题显示,过长会破坏布局和可读性;
- 辅助技术虽会读出,但冗长 caption 易使用户迷失重点;
- 不符合 WCAG 对“简洁标签”的建议(SC 1.3.1, 2.4.1)。
为报表提供真正摘要描述的推荐做法
使用语义化、可访问的组合方式替代“caption 承担摘要功能”:
-
在 caption 上方添加
<h2></h2>或<section aria-labelledby></section>:用标题级元素承载简明摘要句,既可视又可被辅助技术识别为上下文; -
配合
<details><summary></summary></details>:将详细摘要(如数据口径说明、异常说明)收起,供有需要的用户展开阅读,不干扰主流程; - 利用
<table> 的 <code>aria-describedby属性指向一个隐藏或邻近的<div id="summary">,让屏幕阅读器将摘要作为补充信息关联播报(注意:需确保该 div 不被 <code>aria-hidden="true"隐藏)。caption 编写实用建议
- 控制在 15–25 字以内,明确主体+维度(如“华东区3月客户投诉类型分布”);
- 避免使用“上表显示…”“本表汇总…”等冗余指代;
- 如表格含时间范围、地域、指标单位,尽量在 caption 中体现;
- 勿用纯数字、缩写或内部代号(如“FY24-OP#7”),除非全文统一且已定义。










