summary 属性在现代 html 中完全无效，浏览器和屏幕阅读器自 html5 起不再解析其值，w3c 已将其标记为 obsolete，应使用紧贴 table 开头的 caption 元素替代。
summary 属性在现代 HTML 中完全无效，**别用它提供辅助访问说明**。
浏览器（Chrome、Firefox、Edge、Safari）和主流屏幕阅读器（NVDA、JAWS、VoiceOver）自 HTML5 起就不再解析 summary 的值。写 <table summary="用户订单列表"> 不会播报、不渲染、不提升可访问性，反而可能干扰辅助技术对表格结构的判断。
<h3>为什么 <code>summary 不能用
HTML5 规范已将 summary 明确标记为 obsolete（废弃），W3C 和 WCAG 2.1/2.2 均不认可其语义价值。DevTools 会直接报错：The 'summary' attribute on the 'table' element is obsolete.。DOM 接口（如 table.summary）虽仍可读写，但只是历史遗留，不代表它还有实际作用。
<caption></caption> 必须紧贴 <table> 开头
<p><code><caption></caption> 是唯一被所有屏幕阅读器识别的表格标题方式，但它必须作为 <table> 的第一个子元素——放错位置就等于没写：
<ul><li>✅ 正确：<code><table>
<caption>2026 年 Q2 用户退款申请汇总</caption>
<thead>...
<li>❌ 错误：<code><table>
<thead><caption>...</caption></thead>（塞进 <code><thead> 里）
<li>❌ 错误：<code><caption>...</caption>
<table>...</table>（写在 <table> 外）
<li>❌ 错误：用 <code>display: none 或 visibility: hidden 隐藏 <caption></caption> —— 屏幕阅读器直接跳过
scope 和 headers 才真正定义表头关系
scope 和 headers 才真正定义表头关系仅靠 <caption></caption> 还不够；要让屏幕阅读器理解“哪一列对应什么字段”，得靠 scope 或 headers：
- 简单表格：给每个
<th> 加 <code>scope="col"（列标题）或scope="row"（行标题，如首列分类项） - 复杂表头（跨行/跨列）：用
id标记<th>，再在对应 <code><td> 上写 <code>headers="id1 id2" - 别在
<td> 上乱加 <code>scope—— 它只属于<th> <h3>动态表格记得同步更新 <code><caption></caption>文本如果表格内容会刷新（比如搜索、分页、筛选），
真正影响可访问性的，从来不是某个属性写没写，而是结构是否清晰、关联是否明确、语义是否可被机器无歧义地推导。删掉<caption></caption>的文本也必须实时更新。否则屏幕阅读器仍播报旧上下文，例如：“2026 年 Q1 订单”却展示着 Q2 数据。这不是样式问题，是语义断裂 —— 比缺失<caption></caption>更误导用户。summary很容易，难的是每次写<table> 时，下意识确认它后面紧跟的是不是一句真正说清“谁、什么、何时、何地”的 <code><caption></caption>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
