下载链接被屏幕阅读器跳过，根本原因是使用href="#"、href="javascript:void(0)"或div+onclick等破坏语义的写法，导致链接不可聚焦、无法Tab访问、不触发读屏播报；正确做法是用真实URL作href并用event.preventDefault()拦截默认行为。
下载链接为什么会被屏幕阅读器跳过
根本原因不是没加 aria-label，而是用了破坏语义的写法：比如 href="#"、href="javascript:void(0)" 或纯 div + onclick。这些写法让链接失去可聚焦、不可被 Tab 访问、不触发读屏播报目标地址——NVDA 和 VoiceOver 直接忽略它们。
正确做法只有一条：用真实 URL 作为 href 值，再用 event.preventDefault() 拦截默认行为（如跳转），而不是删掉或伪造 href。
- ✅ 推荐：
<a href="/downloads/app-v2.3.1.exe" download>下载 Windows 版</a> - ⚠️ 风险写法：
<a href="#" onclick="downloadFile('win')">下载 Windows 版</a>—— 即使加了role="link"，Tab 键也进不去 - ❌ 绝对禁止：
<div onclick="...">下载</div>—— 键盘用户完全无法触发
如何让“下载”文案对屏幕阅读器有意义
“下载”两个字本身不说明下载什么、格式是什么、大小多少。视障用户听到“下载”就像听到“点这里”，毫无上下文。必须补充明确目标信息。
优先用 aria-label 补充完整语义，而不是堆砌关键词或留空：
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理：
aria-label="下载 Visual Studio Code 1.92.0 macOS ARM64 版本（128 MB）" - ⚠️ 无效：
aria-label="下载软件"或aria-label="Download"（未本地化） - ❌ 错误：
aria-label=""或漏写aria-label—— 读屏只报“下载”，无实质信息
若同一页面有多个“下载”链接，需确保每个 aria-label 唯一且指向明确资源，避免混淆。
文件类型与大小要不要暴露给辅助技术
要，而且必须显式写出。这是判断是否点击的关键依据——用户需要知道是不是自己要的系统版本、会不会耗流量、是否需解压。
不要依赖图标或颜色暗示（读屏看不见），也不要藏在 tooltip 或 hover 状态里（键盘用户触达不到）：
- ✅ 正确方式：直接写在链接文本中，或用
aria-label包含，例如：<a href="..." aria-label="下载 Figma 插件 ZIP 包（3.2 MB）">下载插件</a> - ⚠️ 半吊子：
<span title="ZIP, 3.2 MB">下载插件</span>——title属性对多数读屏无效，且无键盘支持 - ❌ 隐蔽处理：仅用小字号灰色文字写“ZIP | 3.2 MB”在链接下方 —— 读屏可能跳过，低视力用户看不清
禁用状态下载链接怎么处理才真正禁用
仅用 CSS 灰掉颜色 + cursor: not-allowed 是假禁用。键盘用户仍能 Tab 进去、回车触发，读屏仍会把它当有效链接播报。
真禁用必须同步三要素：
- 加
aria-disabled="true" - 设
tabindex="-1"（移出 Tab 顺序） - 保留原
href值（不要删或改成#），方便后续启用时直接移除属性即可恢复
示例：<a href="/downloads/alpha.zip" aria-disabled="true" tabindex="-1">Alpha 测试版（暂未开放）</a>。切记不要同时写 disabled 属性——<a> 不支持该原生属性，浏览器会忽略。
动态启用时，只需移除 aria-disabled 和 tabindex="-1"，无需重写 href。
