
nvda 在鼠标悬停时只读取可见文本而非 aria-label,这是设计使然;真正起作用的是键盘焦点状态下的可访问名称,因此应避免用 aria-label 覆盖可见文字,而应优先使用语义清晰的统一标签或视觉隐藏文本技术。
屏幕阅读器(如 NVDA)对“鼠标悬停”和“键盘聚焦”两种交互模式的处理逻辑截然不同——这正是问题的核心所在。
当你用鼠标悬停在 上时,NVDA 默认播报的是屏幕上实际可见的文本内容(即 "Upload"),而非 aria-label 中定义的可访问名称。这是有意为之的设计:部分视障用户(如低视力者)依赖屏幕放大、高对比度等视觉辅助手段,他们需要听到的内容与所见文字严格一致,否则会造成视听冲突,严重影响操作信心与效率。
✅ 正确验证方式:仅使用键盘导航(Tab / Shift+Tab / 方向键)将焦点移至按钮,此时 NVDA 会准确播报 aria-label 内容(如 “A button to upload”)。这才是符合 WCAG 可访问性标准的真实用户路径。
⚠️ 重要原则:
- 不要用 aria-label 或 aria-labelledby 替换已存在的可见文本标签(如按钮内文字、关联
- 这些 ARIA 属性仅适用于无可见文本标签的场景(例如纯图标按钮、SVG 按钮、仅含 Emoji 的按钮);
- 若需为不同能力用户呈现差异化文案(如更详细的说明),应采用视觉隐藏但屏幕阅读器可读的文本(.sr-only 技术),而非覆盖式 ARIA。
✅ 推荐做法:使用 .sr-only 实现“对盲人友好、对低视力者一致、对语音控制兼容”的三重保障:
配套 CSS(确保视觉隐藏但保留语义):
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}? 补充提醒:
- 避免混合使用 aria-label + 可见文本 —— 多数语音控制工具(如 Dragon NaturallySpeaking)会优先匹配 aria-label 触发操作,导致“说‘Upload’却无法点击”的异常;
- 若按钮文本本身已具备明确性(如 “Upload”),且上下文足够清晰,最简方案就是直接使用它作为唯一标签,无需额外修饰;
- 使用 axe DevTools 或 Lighthouse 审查时,“重复/缺失标签”警告往往源于标签语义不唯一或未正确关联,而非 aria-label 未被读取。
总结:可访问性不是“让屏幕阅读器读出指定文字”,而是构建一套所有用户(全盲、低视力、运动障碍、认知差异)都能一致理解、可靠操作的信息系统。从统一、简洁、语义明确的可见标签出发,辅以恰当的视觉隐藏技术,远比强行覆盖 ARIA 更稳健、更可持续。










