summary属性已废弃，应改用语义化caption（须为table首个子元素且内容具体）配合aria-describedby（用于复杂表格）及scope/headers（明确单元格关系）。
summary 属性已被废弃，别再用了
HTML5 明确废除了 summary 属性，浏览器不再解析它，屏幕阅读器（如 NVDA、VoiceOver）也基本忽略。强行保留只会让代码冗余，还可能误导维护者以为“辅助信息已覆盖”。真实可依赖的替代路径只有两个：语义化 caption + ARIA。
caption 是首选，但必须放对位置且内容有效
caption 元素必须作为 <table> 的**第一个子元素**，否则语义断裂，部分读屏会跳过或误读。更重要的是，它的文本不能是空话（比如“数据表格”），而要传达实际上下文：
<pre class="brush:php;toolbar:false;"></pre>
<table>
<caption>2024 年 Q1 各地区销售额（单位：万元），按环比增长率降序排列</caption>
<thead><tr>
<th>地区</th>
<th>销售额</th>
<th>环比增长</th>
</tr></thead>
<tbody>...</tbody>
</table>
<ul>
<li>避免用 <code>caption 做纯装饰性标题（如“销售统计表”），它本质是“表格的简明摘要”
<h2></h2>），caption 应补充其未涵盖的信息，比如数据范围、排序逻辑、单位说明caption-side: bottom 把文字挪到底部，但语义顺序不变——仍得写在 <table> 开头
<h3>复杂表格必须加 aria-describedby 指向详细说明
</h3>
<p>当表格结构嵌套深、有合并单元格、或需解释计算逻辑时，单靠 <code>caption 不够。这时用 aria-describedby 关联一段隐藏但可读的描述：
注：退款率 = 当月退款金额 / 当月成交总额；自营渠道含物流赔付，第三方平台不含
-
class="visually-hidden"应定义为 visually hidden（而非display: none或visibility: hidden），确保屏幕阅读器可读但不干扰视觉布局 - 不要用
aria-label替代——它会完全覆盖caption内容，导致标题丢失 - 如果表格被 JS 动态渲染，务必在插入 DOM 后同步设置
aria-describedby，否则读屏可能抓不到引用
别忽略表头 scope 和 id/headers 的配合
caption 解决“这是什么表”，而单元格和表头之间的关系靠 scope 或 id/headers 显式声明。否则即使有 caption，屏幕阅读器在读某格数据时仍无法准确说出“这是北京的环比增长”，只报数字。
- 简单表头用
scope="col"或scope="row"足够，例如<th scope="col">销售额</th> - 多层表头（如“Q1”下分“1月”“2月”“3月”）必须用
id+headers显式关联：<th id="q1">Q1</th>→<th headers="q1">1月</th> - 没做 scope 或 headers 的表格，哪怕 caption 写得再清楚，对视障用户仍是“一堆对齐的数字”
scope/headers 配合，以及把 caption 当成摆设写成空泛标题。这两处一松懈，辅助效果就断档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
