caption元素必须直接嵌套在table内且仅出现一次，需包含完整上下文信息，不可视觉隐藏于屏幕阅读器，正确做法是使用sr-only类而非display:none。
caption 元素必须直接嵌套在 <table> 内部，且只能出现一次
<p>很多开发者把 <code><caption></caption> 放在 <table> 外面，或者用 <code><div> + CSS 模拟标题，这会导致屏幕阅读器完全忽略标题语义。正确结构只有一种：<code><table>
<caption>销售数据汇总</caption>
<thead>...</thead>
<tbody>...</tbody>
</table>。注意：它不能放在 <thead> 里，也不能用多个——哪怕表格有分页或折叠区域，也应保持单个 <code><caption></caption> 并通过文本说明范围（例如“2024年Q1销售数据（第1/3页）”）。
caption 文本需包含足够上下文，避免“表格1”“数据表”这类无意义描述
无障碍要求标题能独立传达表格用途。单纯写 <caption>用户列表</caption> 不够，因为没说明“谁的用户、什么状态、何时生成”。更实用的写法是：<caption>2024年6月活跃用户（登录次数 ≥ 3次）按地区分布</caption>。如果标题过长，可用 aria-describedby 拆分补充说明，但主 <caption></caption> 仍须自包含核心信息。
视觉隐藏 caption 时不能用 display: none 或 visibility: hidden
为适配某些 UI 设计（比如仅靠图标+tooltip 表示表格类型），有人会隐藏 <caption></caption> 视觉呈现。但这两个 CSS 声明会让屏幕阅读器彻底跳过它。正确做法是用无障碍专用隐藏类：
.sr-only {<br> position: absolute;<br> width: 1px;<br> height: 1px;<br> padding: 0;<br> margin: -1px;<br> overflow: hidden;<br> clip: rect(0, 0, 0, 0);<br> white-space: nowrap;<br> border: 0;<br>}然后 <caption class="sr-only">...</caption>。任何依赖 aria-label 替代 <caption></caption> 的方案都属于降级处理，不推荐作为首选。
多语言站点中 caption 必须跟随
如果页面支持中英文切换，但 <caption></caption> 文本写死为中文，屏幕阅读器会用错误语音朗读。应确保其内容与当前 或 一致。服务端渲染需动态注入，前端框架（如 React/Vue）应绑定 locale 状态；纯静态页则需为每种语言提供独立 HTML 版本或通过 JS 切换 innerText —— 但要注意：用 JS 修改 <caption></caption> 后，部分旧版读屏不会自动播报更新，需手动触发 aria-live 区域。
<caption></caption> 文本若未同步更新（例如仍显示“共127条”，而实际只剩8条），就会造成严重误导。这比样式错位更难被测试覆盖。
