caption必须紧贴<table>开始标签后且为首个子元素，因其是屏幕阅读器获取表格上下文的唯一语义入口；若置于<thead>内、<tbody>后或用CSS隐藏，辅助技术将无法正确读取，导致用户缺失关键信息。
caption 必须紧贴 <table> 开始标签之后，且是它的第一个子元素。
为什么位置不能错
屏幕阅读器一进入表格，就靠 caption 获取上下文。如果它被塞进 <thead> 里、放在 <tbody> 后面、或者用 CSS 隐藏（display: none 或 visibility: hidden），辅助技术要么跳过它，要么完全读不到——用户只能听到“第一行：张三、HTML/CSS、22”，却不知道这是“2026年Q1前端班学员考核成绩”。
-
caption不是视觉装饰，是语义必需项 - 浏览器渲染顺序不等于 DOM 顺序；即使视觉上它看起来在表头下方，DOM 中也必须是
<table><caption>...</caption><thead>... - 用
summary属性替代？别试——HTML5 已废弃，且对视力正常用户不可见
caption 写什么才有效
空泛描述如“数据表”“信息汇总”毫无意义。屏幕阅读器用户需要的是可决策的上下文。
- 写具体用途：“2026年Q1前端班学员考核成绩”
- 带时间/范围/主体：“北京朝阳区2025年10月–2026年3月社保缴纳明细”
- 避免模糊词：“用户列表” → 改为“注册未满30天的待审核用户（共17人）”
- 长度控制在 120 字符内，确保多数屏幕阅读器能完整播报
常见错误：caption 被包裹在其他标签里
有人为了居中或加样式，把 caption 套进 <div> 或 <p>，甚至加 role="heading"。这会破坏其隐式语义角色（role="tablecaption"），导致部分阅读器降级为普通段落处理。
立即学习“前端免费学习笔记（深入）”；
-
caption本身已是语义化标题，无需额外role - 样式直接作用于
caption标签即可，例如caption { text-align: center; font-weight: bold; } - 若需视觉隐藏但保留语义，用
visually-hidden类（position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;），而非display: none
真正难的不是写对 caption 的位置，而是每次写完表格都下意识检查：它是不是 <table> 的第一个孩子？内容有没有告诉用户“这张表到底在干什么”？这两个问题没答准，其余无障碍努力都会打折扣。
