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