summary 属性已废弃，因 html5 标准移除且主流屏幕阅读器不再支持；应改用 caption + aria-describedby 组合实现语义化可访问性，避免误用 aria-label 覆盖表格结构。
summary 属性为什么不能用了
HTML5 标准里 summary 属性已被正式废弃，浏览器不再要求支持它，部分屏幕阅读器（比如较新版本的 NVDA、JAWS）已停止读取该属性。继续写 <table summary="用户订单列表"> 不仅无效，还可能干扰无障碍测试工具的判断。<h3>用 aria-label 替代时要注意什么</h3>
<p><code>aria-label 能提供简短描述，但它不适用于所有表格场景——它会完全覆盖表格内所有文本内容（包括标题、表头、数据单元格），导致屏幕阅读器只读 label，不读实际结构。所以只在极简、无标题、纯数据型表格中直接用 aria-label。
- 适合：嵌入式小表格（如状态图标旁的 2×2 数据对照表）
- 不适合：带
<caption></caption>、<thead> 或复杂语义的主业务表格<li>错误写法：<code><table aria-label="订单详情"><caption>2024年6月订单</caption></table>—— 屏幕阅读器只会读“订单详情”，跳过 caption
真正该用的替代方案是 caption + aria-describedby
标准做法是保留语义化结构：用 <caption></caption> 做可见且可读的标题，再用 aria-describedby 指向一个隐藏的详细说明块。这样既满足 WCAG 2.1，又兼容所有主流读屏软件。
按时间倒序排列，含订单号、日期、金额和状态；点击任一行可查看详情
其中 class="sr-only" 是常规的视觉隐藏 CSS 类（position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;），确保仅对辅助技术可见。
summary 的原始意图其实由多个 ARIA 属性分担了
summary 原本想表达的是“这张表是用来干什么的、怎么组织的、需要注意什么”。单一 aria-label 扛不起这个责任，得组合使用：
-
<caption></caption>：说明“是什么”（核心主题） -
aria-describedby：补充“怎么看/注意什么”（交互提示、排序逻辑、特殊规则） -
aria-labelledby：当 caption 不够或需复用已有标题时指向外部元素 - 必要时加
role="grid"或role="table"（仅当语义被 JS 破坏时兜底）
别为了省事把所有信息塞进 aria-label。表格的可访问性关键不在“加个属性”，而在是否让辅助技术能像 sighted 用户一样理解结构和意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
