nvda 在鼠标悬停时仅朗读可见文本而非 `aria-label`，这是正常行为；真正生效场景是键盘导航（如 tab 键聚焦），此时 `aria-label` 会被正确读出。关键原则是：**不可用 `aria-label` 覆盖已有可见文本**，而应优先使用语义清晰的统一标签，或通过视觉隐藏文本（`.sr-only`）实现差异化表达。
在 Web 无障碍实践中，一个常见误区是认为 aria-label 应在所有交互方式下“强制替换”可见文本——例如为按钮 添加 aria-label="A button to upload"，期望屏幕阅读器（如 NVDA）始终朗读后者。但事实并非如此。
❌ 错误做法：用 aria-label 覆盖可见文本
- 鼠标悬停时：NVDA 优先朗读屏幕上实际可见的 "Upload"（符合部分视力用户需求）；
- 键盘聚焦时：虽会读 aria-label，但造成视听不一致——视力用户看到“Upload”，而听觉用户听到冗长描述，违背 WCAG “可预测性”原则（SC 3.2.4）；
- 语音控制软件（如 Dragon）：通常基于 aria-label 触发操作，用户说“Click An upload button…” 却无法激活显示为“Upload”的按钮，导致功能失效。
✅ 正确方案：统一标签 or 视觉隐藏增强
方案一：首选——简洁、唯一、语义明确的可见文本
✅ 优势：无需 ARIA 干预，天然兼容键盘、鼠标、语音控制及放大镜用户；满足 WCAG 2.1 SC 4.1.2（名称-角色-值）；避免维护两套标签的风险。
方案二：必要时——用 .sr-only 实现“视觉隐藏 + 听觉增强”
适用于图标按钮、纯 Emoji 按钮等无足够可见文本的场景：
配套 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-hidden="true" 必须加在仅用于视觉呈现的内容上（如图标、装饰性文字），防止重复朗读；
- 避免在含完整可见文本的按钮中滥用此模式——它本就该是“无文本”场景的兜底方案；
- 动态生成按钮时（如循环渲染列表），确保每个 .sr-only 文本语义唯一且上下文相关（例如 Upload ${docName}），而非静态复用。
总结：无障碍设计的核心是“一致性”与“最小干预”
- 不要为已有清晰可见文本添加 aria-label —— 这不是增强，而是制造冲突；
- 测试必须覆盖多交互通道：用键盘（Tab/Shift+Tab）验证朗读，用鼠标悬停观察是否匹配视觉，用语音命令验证可操作性；
- 终极建议：花时间打磨可见文案本身。"Upload" → "Upload ID verification document" 不仅帮助屏幕阅读器用户，也提升所有用户的认知效率。
遵循这一原则，你的应用将自然通过 Total Validator 等工具的“唯一标签”检查，同时真正实现包容性体验。
