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