只有当链接无可见文本或文本模糊无法表达目标时才该加aria-label，如纯图标链接、文案为“详情”“更多”或多个同名链接；禁用于已有明确文本的链接，否则会覆盖原内容造成视听不一致。
什么时候该给 @#@#@#@#@#@#@#@#@#@0 再加 aria-label="跳转到主页"——屏幕阅读器会直接忽略“首页”，只读你写的字符串，造成视听不一致。
如果链接旁有可见说明文字（比如图标右侧写着“设置”），优先用 aria-labelledby 引用那个文字元素的 id，而不是写死 aria-label。
@#@#@#@#@#@#@#@#@#@1 ✅ 纯图标，无文本，必须加
@#@#@#@#@#@#@#@#@#@2 ✅ 文本模糊，“详情”没说明对象，需补充上下文@#@#@#@#@#@#@#@#@#@3 ✅ 多个“下载”按钮共存，靠 aria-label 区分目标@#@#@#@#@#@#@#@#@#@4 ✅ 禁用状态需明确传达意图，不能只靠 CSS 灰掉注意：href="#" 本身会导致页面跳顶，且被读作“当前页面”。真禁用时，应移除 href 或设为 href="javascript:void(0)"，并同步加 aria-disabled="true" 和 tabindex="-1"。
哪些情况绝对不能加 aria-label
aria-label 会完全覆盖链接内部文本，一旦加错，用户听到的就是错的。以下场景禁用：
-
@#@#@#@#@#@#@#@#@#@5加aria-label="用户账户入口"→ 屏幕阅读器只读后者，“登录”消失 -
@#@#@#@#@#@#@#@#@#@6加aria-label="contact us"→ 中英文混用，低视力用户困惑 -
@#@#@#@#@#@#@#@#@#@7加aria-label="搜索"→alt已提供可访问名称，重复加导致 Lighthouse 报“冗余标签” - 用
<div onclick="location.href='...'">首页</div>模拟链接 → 先重构为原生<a></a>，别指望靠aria-label救
placeholder、title、CSS 伪元素内容都不能替代 aria-label；它们不被所有读屏器识别，或仅在特定时机播报。
验证 aria-label 是否生效
最简单的方法是打开 Chrome DevTools → Elements 面板 → 右键链接节点 → “Inspect Accessibility Properties” → 查看 “Name” 字段是否显示你写的值。若显示为空或 “idref not found”，说明引用失败或属性未生效。
键盘 Tab 进入链接后，听 NVDA/VoiceOver 是否准确朗读；禁用 CSS 后检查 DOM 结构是否仍保持语义连贯——aria-label 是补救手段，不是掩盖结构缺陷的胶带。
真正容易被忽略的点是：它只解决“没文本”的问题，不解决“文本写得差”或“用了非语义结构”的问题。加之前，先问一句：这个链接，换成盲人用户，光听名字能立刻明白要做什么吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
