caption必须作为table的唯一且首个子元素，居中显示于表上方；内容需明确描述表格核心目的，避免空泛或指代性表述；样式须用CSS控制，禁用align属性；框架中应硬编码而非条件渲染。
caption 标签必须直接放在 table 开头，且只能有一个
HTML 中 caption 是 table 的唯一合法首子元素，浏览器会自动将其渲染为表格标题，居中显示在表上方。如果把它写在 thead 里、或放在 tr 后面、或多加一个，都会被解析为无效结构——部分浏览器可能仍显示，但语义丢失，无障碍访问（如屏幕阅读器）无法正确识别。
正确写法只有这一种顺序：
| 用户名 | 登录次数 |
|---|---|
| alice | 17 |
caption 文字内容要描述表的核心目的，不是装饰性短语
很多开发者随手写“表格标题”“数据汇总”这类空泛文字，这会让辅助技术用户完全无法理解表格用途。WCAG 要求 caption 必须提供足够上下文，比如“2024年6月各地区销售额对比（单位：万元）”，而不是“销售数据”。
- 避免使用“上表显示…”“如下所示”等指代性表述（页面结构变化后会失效）
- 如果表格有筛选/排序状态，建议动态更新
caption文本（例如用 JavaScript 修改caption.textContent） - 多语言站点需确保
caption与表格内容语言一致，并设置lang属性
样式控制靠 CSS，不要用 align 属性
align 属性（如
table caption {
caption-side: top; /* 默认就是 top，可显式声明 */
text-align: left; /* 左对齐（默认居中）*/
padding: 0.5em 0;
font-weight: bold;
}
注意：caption-side 还支持 bottom，但放在底部时屏幕阅读器仍按顶部逻辑读取，不推荐用于语义化表格；若真需底部说明，应改用 tfoot 或独立段落 + aria-labelledby 关联。
React/Vue 等框架中 caption 容易被条件渲染逻辑意外移除
在 JSX 或模板中，如果把 caption 包在 v-if / {condition && 里，一旦条件为 false，整个 caption 就没了——但 table 结构依然存在，导致语义断裂。更隐蔽的问题是：用 map 渲染表头时误把 caption 写进循环体。
安全做法：
- 始终将
caption作为table的第一个子节点硬编码，不参与条件判断 - 需要动态内容？只绑定文本，例如
{title} - 使用 ESLint 插件（如 eslint-plugin-jsx-a11y）可捕获
caption缺失或位置错误
caption 的位置和内容看似简单，但它是表格可访问性的第一道门。漏掉、错位、或写成“无意义占位符”，后续所有 aria-* 补救都事倍功半。
