html5已废弃summary属性，应改用caption配合scope/headers实现语义化表格结构，并在必要时通过aria-describedby补充说明；避免使用css隐藏文本替代可访问性标记。
summary 属性在现代 HTML 中已被弃用
HTML5 明确移除了 summary 属性，浏览器不再解析它，屏幕阅读器（如 NVDA、VoiceOver）也基本忽略该属性。即使你写了 <table summary="本表列出2024年各季度销售额">，实际对视障用户无效——这不是兼容性问题，而是标准层面的废弃。
<h3>替代方案：用 caption + scope / headers 实现语义化表格结构</h3>
<p>真正起作用的是可访问的结构标记，而非隐藏摘要。关键在于两层：顶层意图说明 + 单元格关系明确。</p>
<ul><li>
<code><caption></caption> 必须存在且紧贴 <table> 开始，它会被屏幕阅读器作为表格标题朗读（例如“表格：2024年各季度销售额”）
<li>表头必须用 <code><th>，并为数据单元格明确关联表头：横向用 <code>scope="col" 或 scope="row"，复杂表格用 headers 属性指向对应 <th id="xxx">
<li>避免仅靠视觉样式（如加粗、颜色）表达结构——屏幕阅读器看不到这些</li>
<pre class="brush:php;toolbar:false;"></pre>
<table>
<caption>2024年各季度销售额（单位：万元）</caption>
<thead><tr>
<th scope="col">部门</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
<th scope="col">Q4</th>
</tr></thead>
<tbody><tr>
<th scope="row">销售部</th>
<td>120</td>
<td>135</td>
<td>142</td>
<td>158</td>
</tr></tbody>
</table>
<h3>复杂表格需额外补充 aria-describedby</h3>
<p>当 <code><caption></caption> 不足以说明用途（比如含多级分组、特殊计算逻辑、数据来源说明），应添加简短描述文本，并用 aria-describedby 关联：
- 描述文本放在
<div> 或 <code><span></span>中，设id <table aria-describedby="desc-1"> 指向该 <code>id- 描述内容要简洁（建议 ≤ 100 字），聚焦“为什么这张表重要”或“如何解读”，而非重复数据
<div id="desc-1" class="visually-hidden">本表按产品线和区域交叉汇总，数值为去重后的活跃用户数；空单元格表示无数据，非零值已四舍五入到千位。</div>
别依赖 CSS 隐藏的“摘要”文本
有人尝试用 display: none 或 visibility: hidden 把摘要塞进表格里，指望屏幕阅读器读取——这不可靠。多数阅读器会跳过这些样式隐藏的内容，尤其当它们不在焦点流中时。
- 若真需要补充说明，用
aria-describedby或<caption></caption>是唯一稳定路径 -
visually-hidden类（通过绝对定位 + 尺寸归零 + overflow hidden 实现）可作为辅助手段，但必须配合 ARIA 属性显式引用，不能单独存在 - 测试时务必用真实屏幕阅读器（不是仅靠 Lighthouse 或 axe 插件）验证朗读顺序和内容是否完整
