caption标签是为统计表格添加语义化标题的唯一正确方式,必须紧贴标签后、首个或前;标题需包含时间、对象、指标、单位中至少三项,不可隐藏或脱离语义结构。

CAPTION 标签是为统计表格添加说明的唯一语义化方式,它不是装饰性文字,而是告诉用户“这张表在说什么”的关键信息。
必须放在正确位置才能生效
它得紧贴 <table> 开始标签之后、第一个 <code><tr> 或 <code><thead> 之前。放错地方(比如塞进 <code><thead> 里,或用 <code><div> 包在外面)会让屏幕阅读器完全读不到标题,浏览器也可能忽略渲染。
<ul><li>✅ 正确:<code><table>
<caption>2024年各城市GDP增速(同比)</caption>
<thead>...
<li>❌ 错误:<code><table>
<thead><caption>...</caption></thead>(结构非法)
<li>❌ 错误:<code><div class="title">...</div>
<table>...(无语义,无障碍失效)
<h3>说明要具体,别写“统计表”这种空话</h3>
<p>统计表格的标题应包含时间、对象、指标和单位四个要素中的至少三项,让视障用户和普通用户一眼就懂数据边界。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a>
<p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容,将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>推荐写法:<code><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> - 这样既保持标题简洁,又确保所有用户能获取完整上下文










