summary属性在现代无障碍设计中完全不生效，浏览器和屏幕阅读器自HTML5起已彻底忽略它；应改用caption作为表格唯一标题，并为th显式设置scope或复杂场景下用id+headers绑定。
summary 属性在现代无障碍设计中完全不生效，别用它。 浏览器和屏幕阅读器（NVDA、JAWS、VoiceOver）自 HTML5 起已彻底忽略该属性，写 summary="用户订单列表" 不会播报、不参与语义解析，反而可能干扰表格结构识别。
为什么 DevTools 会报错“The 'summary' attribute is obsolete”
W3C 明确将 summary 标记为 obsolete，HTML5 规范中已移除其语义定义。Chrome、Firefox 等浏览器解析时直接跳过该属性，DOM 中虽仍可读取 table.summary，但只是历史残留，无实际作用。VS Code、HTMLHint、axe 等工具检测到就会标红报错，CI 流程也可能因此中断。
真正起作用的替代方案：caption + scope
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> 外）
<p><code>scope 必须显式声明在 <th> 上，否则屏幕阅读器无法建立行列归属关系：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>
<code><th scope="col">姓名</th> —— 告诉读屏器：这一列所有 <td> 都属于“姓名”字段
<li>
<code><th scope="row">张三</th> —— 仅用于 <tbody> 中每行首个 <code><th>，表示该行分类标识
<li>别给 <code><td> 加 <code>scope —— 它只属于 <th>
<h3>复杂表头必须用 id + headers 显式绑定</h3>
<p>一旦出现 <code>rowspan、colspan 或多级表头，scope 就失效。屏幕阅读器无法自动推断一个 <td> 同时属于哪几个表头，必须靠 <code>headers 手动指明：
- 给
<th> 加唯一 <code>id：<th id="name-header" scope="col">姓名</th> - 在对应
<td> 上用空格分隔多个 <code>id：<td headers="name-header dept-header">张三</td> - 动态表格记得同步更新
<caption></caption>文本 —— 比如筛选后展示的是 Q2 数据，但<caption></caption>还写着 “Q1 订单”，这比没写更误导用户
真正影响可访问性的，从来不是某个属性写没写，而是结构是否清晰、关联是否明确、语义是否可被机器无歧义地推导。删掉 summary 很容易，难的是每次写 <th> 时，下意识确认它管的是行还是列。</th>
