caption标签必须作为table的第一个子元素，否则语义失效；summary属性已废弃；caption支持css样式但不可脱离table流；复杂表格需配合aria-describedby增强可访问性。
caption 标签必须直接放在 table 开头，否则语义失效
浏览器和读屏软件只认 <caption></caption> 作为表格标题的唯一合法位置——它得是 <table> 的第一个子元素。放错位置（比如塞在 <code><thead> 里、或者写在 <code><table> 外面）会导致标题不被识别，<code>aria-label 也救不回来。
常见错误现象：
– 表格在屏幕阅读器中读不出标题
– DevTools 里看到 caption 渲染了，但辅助技术完全忽略
– CSS 设置 caption-side: bottom 后样式生效，但语义仍丢失（因为位置错了）
- 正确写法：
<table> <caption>用户登录统计</caption> <thead>...</thead> </table> - 错误写法：
<table><thead><caption>...</caption></thead></table>（嵌套在<thead> 内） <li>错误写法：<code><caption>...</caption> <table>...</table>（在 table 外） - 更进一步：用
<th scope="col"> 明确列含义，比 summary 更精准、更可交互 <h3>caption 支持 CSS 控制位置和样式，但默认居上</h3> <p><code><caption></caption>默认渲染在表格上方居中，这是浏览器 UA 样式决定的。你可以用caption-side拉到下方，用text-align或margin调整对齐，但它始终是表格的逻辑一部分，不能脱离<table> 流式布局单独定位。 <p>性能影响几乎为零，兼容性极好（IE8+ 都支持），但注意两个坑：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>caption-side: bottom在某些旧版 Safari 中可能触发重排异常，建议加display: table-caption双保险 - 如果用 Flex/Grid 把整个
<table> 包起来，<code><caption></caption>会脱离表格流，语义断裂——别这么干 - 示例：
数据来源：2024年Q2后台日志 1 - 正确做法：
各地区销售额（2024年） ...本表含4个地区列，行按季度分组；灰色行表示数据未确认
-
class="visually-hidden"是必备的 CSS 类（用clip+position实现），不能只靠display: none或visibility: hidden，否则读屏器也读不到 - 别用
aria-label替代<caption></caption>——它会覆盖 caption，且无法被翻译工具或 CSS 选中
summary 属性已废弃，别再用
summary 是 HTML4 的属性，2014 年起就被 W3C 明确标记为“obsolete”，现代 HTML5 文档里写它毫无作用，Chrome/Firefox/Edge 全部忽略，且会触发控制台警告 The 'summary' attribute on the 'table' element is obsolete.。
使用场景其实很窄：它原本想给辅助技术提供“表格结构说明”，比如“三列数据，按日期倒序排列”。但实践发现，这种纯描述性文本远不如用 <caption></caption> + <th scope="col"> + ARIA 配合来得可靠。
<ul><li>绝对不要写：<code><table summary="用户注册时间、邮箱、状态三列数据">
<li>替代方案：把关键结构信息融入 <code><caption></caption>，例如 <caption>用户注册信息（按注册时间倒序）</caption>
复杂表格需要 caption + aria-describedby 组合增强可访问性
当表格有分组、合并单元格、多级表头或动态筛选时，单靠 <caption></caption> 不足以说明全部上下文。这时候得补一个隐藏的描述块，用 aria-describedby 关联。
容易踩的坑是：描述文本写得太笼统（比如“详见说明”），或者 ID 拼写错误导致关联失败。读屏软件不会报错，只会静默跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
