html5已废除summary属性，它被浏览器忽略且破坏可访问性；应改用aria-describedby引用真实存在的可见元素id，并配合caption和scope/headers共同构建完整表格无障碍支持。
summary属性已失效，别再用了
HTML5 明确废除了 summary 属性。浏览器解析时直接忽略它，DOM 中查不到，JS 读不到，CSS 也样式不了。主流屏幕阅读器（NVDA、JAWS、VoiceOver）基本不读取——旧版 JAWS 甚至会因检测到该属性而跳过整个表格或报错。VS Code、HTMLHint、CI 流程中的 linter 也会标记为 obsolete attribute，导致构建失败。
你写 <table summary="用户信息表">，等于白写。不是“没效果”，而是“破坏可访问性”：它让辅助技术误判结构，还污染代码。
<h3>aria-describedby 是唯一可行的替代方案
</h3>
<p><code>aria-describedby 必须引用一个真实存在的、语义清晰的 HTML 元素 ID，且该元素不能被 display: none 或 aria-hidden="true" 隐藏。它适用于需要向屏幕阅读器传递额外上下文的场景，比如数据口径、统计周期、异常标注等。
- 必须作为
<table> 的直接属性使用：<code><table aria-describedby="table-desc-123"> <li>被引用的元素推荐用 <code><p id="table-desc-123"></p>，内容需具体（如“2024 年 Q2 华东区门店销售额，不含退货与促销补贴”） - 若描述含多条信息，可拆成多个 ID，用空格分隔：
aria-describedby="desc-period desc-currency desc-exclusion"，朗读顺序按 DOM 中出现顺序 - 不要把长段落塞进一个
<p></p>—— 超过两句话就容易信息过载；超过三句建议用aria-details（支持有限，暂不推荐） -
<caption></caption>必须是<table> 的第一个子元素，且内容要具体（如 <code><caption>2024 年 7 月各渠道退款率对比（单位：%）</caption>），不能是“数据表”“统计表”这类空泛词 -
scope或headers用于明确单元格归属：简单表用<th scope="col">，合并表头则需配合 <code>id和<td headers="col1 col2"> <li> <code>aria-describedby只在前两者基础上叠加解释性内容，比如“注：退款率=当月退款金额 / 当月成交金额，不含平台佣金” - 三者缺一环，屏幕阅读器可能只读出数字，却不知道“这是北京的环比增长率”
caption + scope/headers + aria-describedby 才是完整组合
单靠 aria-describedby 不足以支撑表格可访问性。它只负责“补充说明”，不承担“核心命名”或“结构映射”职责：
动态渲染表格时最容易漏掉的点
服务端渲染或初始 HTML 中就该预置描述容器：<p id="table-desc-123" class="sr-only"></p>。客户端 JS 更新内容时，只改 textContent，不删重建元素——否则 ID 在 DOM 中消失，aria-describedby 就断链了。
更关键的是：如果表格是异步加载的，必须确保 aria-describedby 属性是在目标 <p></p> 已挂载后才设置。常见错误是 JS 先设属性，再插入描述元素，结果屏幕阅读器完全静默。
最易被忽略的不是语法，而是生命周期对齐：ID 存在性、DOM 挂载时机、属性绑定顺序，三者必须严格同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
