只有当链接无可见文本或文本模糊无法表达目标时才该加aria-label，如纯图标链接、文案为“详情”“更多”或多个同名链接；禁用于已有明确文本的链接，否则会覆盖原内容造成视听不一致。
什么时候该给 <a> 加 aria-label
只有当链接本身没有可读的可见文本，或文本模糊到无法表达目标时，才需要加 aria-label。比如纯图标链接（<a><svg></svg></a>）、文字是“点击这里”“详情”“更多”的链接，或者多个相同文案但指向不同资源的链接。
常见错误是给已有明确文本的链接硬加：<a href="/home">首页</a> 再加 aria-label="跳转到主页"——屏幕阅读器会直接忽略“首页”，只读你写的字符串，造成视听不一致。
如果链接旁有可见说明文字（比如图标右侧写着“设置”），优先用 aria-labelledby 引用那个文字元素的 id，而不是写死 aria-label。
<a> 加 aria-label 的正确写法
直接在 <a> 标签上写属性即可，不需要额外 role 或 tabindex——<a> 本身是可聚焦、可交互的原生语义元素。
立即学习“前端免费学习笔记（深入）”；
-
<a href="/cart" aria-label="查看购物车"><svg></svg></a>✅ 纯图标，无文本，必须加 -
<a href="/docs" aria-label="查阅《无障碍开发指南》全文">详情</a>✅ 文本模糊，“详情”没说明对象，需补充上下文 -
<a href="/report-1" aria-label="下载2024年Q3销售报表">下载</a>✅ 多个“下载”按钮共存，靠aria-label区分目标 -
<a href="#" onclick="return false;" aria-label="暂不可用的分享功能">分享</a>✅ 禁用状态需明确传达意图，不能只靠 CSS 灰掉
注意：href="#" 本身会导致页面跳顶，且被读作“当前页面”。真禁用时，应移除 href 或设为 href="javascript:void(0)"，并同步加 aria-disabled="true" 和 tabindex="-1"。
哪些情况绝对不能加 aria-label
aria-label 会完全覆盖链接内部文本，一旦加错，用户听到的就是错的。以下场景禁用：
-
<a href="/login">登录</a>加aria-label="用户账户入口"→ 屏幕阅读器只读后者，“登录”消失 -
<a href="/contact">联系我们</a>加aria-label="contact us"→ 中英文混用，低视力用户困惑 -
<a href="/search"><img src="search.png" alt="搜索"></a>加aria-label="搜索"→alt已提供可访问名称，重复加导致 Lighthouse 报“冗余标签” - 用
<div onclick="location.href='...'">首页</div>模拟链接 → 先重构为原生<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 是补救手段，不是掩盖结构缺陷的胶带。
真正容易被忽略的点是：它只解决“没文本”的问题，不解决“文本写得差”或“用了非语义结构”的问题。加之前，先问一句：这个链接，换成盲人用户，光听名字能立刻明白要做什么吗？
