解决NVDA重复读取表格的无障碍方案
核心问题分析
NVDA重复读取通常源于：
- 原生的默认读取逻辑与额外ARIA属性（如
aria-describedby/aria-labelledby）形成重复关联 - 页面存在冗余文本元素被辅助技术识别为表格描述
- NVDA默认设置可能开启了表格标题重复读取选项（需从代码层面兼容，不依赖用户调整）
正确处理步骤
1. 保留原生的语义完整性
绝对不要隐藏原生，它是表格语义化的核心组成部分。确保是的直接子元素
<table>
<caption>
年度销售数据汇总
<p>注：数据涵盖线下门店及线上全渠道，统计截止2024年6月<sup aria-describedby="fn1">1</sup></p>
<span id="fn1" class="sr-only">1: 线上渠道含第三方电商与品牌自营商城</span>
</caption>
<!-- 表格thead/tbody等内容 -->
</table>
- 脚注用
<sup>配合aria-describedby指向解释文本，同时给解释文本加sr-only类（视觉隐藏但保留无障碍读取），兼顾语义与视觉布局。
2. 移除冗余的ARIA关联
检查表格或页面其他元素是否存在重复关联
内容的aria-describedby/aria-labelledby属性，这类冗余会导致NVDA重复读取。若已使用原生，无需再给表格加额外的关联属性指向caption内容。3. 拆分复杂内容（可选）
若caption内容过于冗长，可将核心标题保留在
内，详细描述、脚注移到表格外部，用aria-describedby关联到表格，既保留语义，又优化读取流程：<table aria-describedby="table-desc">
<caption>年度销售数据汇总</caption>
<!-- 表格内容 -->
</table>
<div id="table-desc" class="sr-only">
注：此数据包含线下门店及线上平台的全部销售额，数据统计截止至2024年6月30日。1: 线上平台销售额包含第三方电商及品牌自营商城
</div>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
4. NVDA特定调试
若仍有重复读取，可检查NVDA设置：打开NVDA菜单 → 偏好设置 → 文档格式 → 找到“表格标题”选项，设置为“仅读取一次”。但作为开发者，优先通过代码解决，避免依赖用户调整设置。
内容的提问来源于stack exchange，提问作者magenta placenta
，这是WAI-ARIA规范的强制要求：
