caption标签必须作为table的第一个子元素，否则语义失效；不可用title或aria-label替代，它是WCAG合规必需项，缺失会导致屏幕阅读器跳过表格。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

caption 标签必须紧贴

开头，不能放错位置

caption 是表格的标题容器，但它的位置非常严格：必须作为 <table> 的第一个子元素，否则浏览器可能不渲染或语义失效。常见错误是把它写在 <thead> 里、插在 <tr> 中间，或者放在 </table> 之后。

正确写法只有这一种结构：

<table>
  <caption>销售数据汇总（2024年Q1）</caption>
  <thead>
    <tr><th>月份</th><th>销售额</th></tr>
  </thead>
  <tbody>
    <tr><td>1月</td><td>¥120,000</td></tr>
  </tbody>
</table>

caption 和 aria-label / title 属性不是一回事

有人试图用 title 属性或 aria-label 替代 <caption>，这是无效的。屏幕阅读器对 <caption> 有专门支持，会明确读作“表格：XXX”，而 title 只触发悬停提示，aria-label 虽能读出，但丢失了原生语义和可访问性上下文（比如无法区分是表头还是表格整体描述）。

• <caption> 是 HTML5 表格语义必需项，影响 WCAG 合规性
• 若需补充说明，可在 <caption> 内部加 <span> 或用 CSS 控制样式，不要拆到外部
• 多语言站点中，<caption lang="zh"> 比依赖 JS 动态设置更可靠

caption 默认居中且加粗，但样式容易被重置

浏览器默认给 <caption> 应用了 text-align: center 和 font-weight: bold，但一旦项目用了重置 CSS（如 normalize.css 或 tailwind 的 base styles），这些样式常被清掉，导致标题突然左对齐、变细——看起来像普通段落。

立即学习“前端免费学习笔记（深入）”；

稳妥做法是显式声明：

caption {
  caption-side: top;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.5em;
}

注意：caption-side 默认是 top，但 IE 旧版本只认 bottom；如需兼容，建议固定写 caption-side: top 并测试。

表格没有 caption 时，辅助技术可能跳过整个表格

部分屏幕阅读器（尤其是 NVDA + Firefox 组合）在遇到无 <caption> 的 <table> 时，会默认将其识别为“布局表格”而非“数据表格”，从而跳过行/列导航，用户根本不知道里面还有内容。

哪怕只是占位，也建议写一个最小化 caption：

• 空表格：<caption>空数据表</caption>
• 临时占位：<caption>待加载数据</caption>
• 完全不想显示文字？用 <caption aria-hidden="true">隐藏标题</caption>，但必须确保有其他可访问替代方案（如 aria-labelledby）

caption 不是装饰，它是表格可访问性的第一道门槛。漏掉它，后续所有 <th>、scope 属性都可能失效。