caption必须紧贴开始标签后且为首个子元素，因其是屏幕阅读器获取表格上下文的唯一语义入口；若置于内、后或用css隐藏，辅助技术将无法正确读取，导致用户缺失关键信息。

caption 必须紧贴 <table> 开始标签之后，且是它的第一个子元素。 <h3>为什么位置不能错</h3> <p>屏幕阅读器一进入表格，就靠 <code>caption 获取上下文。如果它被塞进 <thead> 里、放在 <code><tbody> 后面、或者用 CSS 隐藏（<code>display: none 或 visibility: hidden），辅助技术要么跳过它，要么完全读不到——用户只能听到“第一行：张三、HTML/CSS、22”，却不知道这是“2026年Q1前端班学员考核成绩”。

• caption 不是视觉装饰，是语义必需项
• 浏览器渲染顺序不等于 DOM 顺序；即使视觉上它看起来在表头下方，DOM 中也必须是 <table> <caption>...</caption> <thead>...</thead>... <li>用 <code>summary 属性替代？别试——HTML5 已废弃，且对视力正常用户不可见

caption 写什么才有效

空泛描述如“数据表”“信息汇总”毫无意义。屏幕阅读器用户需要的是可决策的上下文。

• 写具体用途：“2026年Q1前端班学员考核成绩”
• 带时间/范围/主体：“北京朝阳区2025年10月–2026年3月社保缴纳明细”
• 避免模糊词：“用户列表” → 改为“注册未满30天的待审核用户（共17人）”
• 长度控制在 120 字符内，确保多数屏幕阅读器能完整播报

常见错误：caption 被包裹在其他标签里

有人为了居中或加样式，把 caption 套进 <div> 或 <code><p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，甚至加 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> 的第一个孩子？内容有没有告诉用户“这张表到底在干什么”？这两个问题没答准，其余无障碍努力都会打折扣。</table>