链接文本必须自包含语义，图像链接需用alt描述目标，aria中aria-label覆盖文本、aria-labelledby引用id，target="_blank"须配rel="noopener"和aria-label提示，相同链接文本应通过文案或aria-label区分，键盘聚焦反馈需满足4.5:1对比度。
链接文字本身是否能说明去向
屏幕阅读器用户常跳过链接列表快速扫描，如果只写“点击这里”“详情”，他们就完全不知道点进去是注册页、PDF下载还是外部广告。链接文本必须自包含语义，哪怕脱离上下文也能判断目的。
- ✅ 推荐：
@#@#@#@#@#@#@#@#@#@0、@#@#@#@#@#@#@#@#@#@1 - ❌ 避免：
@#@#@#@#@#@#@#@#@#@2、@#@#@#@#@#@#@#@#@#@3 - 图像链接必须有
alt文本，且描述目标而非图像本身，例如：@#@#@#@#@#@#@#@#@#@4
aria-label 和 aria-labelledby 怎么选
当视觉文案受限（比如纯图标按钮、复用组件），需要用 ARIA 补充语义。但二者行为不同，误用会导致重复朗读或静音。
-
aria-label完全覆盖链接文本，适合无可见文字的场景，如：@#@#@#@#@#@#@#@#@#@5 -
aria-labelledby指向页面中其他元素的 ID，适合复用标题或已有说明，例如：<h2 id="report-title">季度财务报告</h2>@#@#@#@#@#@#@#@#@#@6 - 不要同时用
aria-label和可见文本，除非你明确需要覆盖——否则屏幕阅读器会读两遍
target="_blank" 必须配 rel="noopener"
加 target="_blank" 本身不影响可访问性，但若不加 rel="noopener"，新页面可通过 window.opener 控制原页面，存在安全风险；而对屏幕阅读器用户来说，更关键的是缺少上下文提示。
- 必须写：
@#@#@#@#@#@#@#@#@#@7 - 不加
aria-label或类似提示时，用户无法预判是新开页还是跳转，尤其对认知障碍者易造成迷失 - 避免仅靠视觉图标（如“↗”）表示新窗口——屏幕阅读器默认不读这类符号，需用
aria-hidden="true"隐藏图标，并在aria-label中明说
同一页面内多个相同链接文本怎么区分
导航栏、文章正文、页脚都可能有“关于我们”，但目标 URL 不同。屏幕阅读器不会自动告诉你这是“顶部导航的关于我们”还是“文末推荐的关于我们”，必须人工区分。
- 优先改文案：页脚链接写成
@#@#@#@#@#@#@#@#@#@8，正文推荐写成@#@#@#@#@#@#@#@#@#@9 - 次选
aria-label：确保它比原链接文本更具体，例如aria-label="页脚 - 关于我们" - 绝对不要依赖 CSS 视觉位置（如“上方链接”“右侧链接”）做区分——这在语音浏览中毫无意义
实际中最容易被忽略的，是链接在键盘聚焦时的视觉反馈是否足够明显，以及是否与周围颜色形成至少 4.5:1 的对比度。这点不写进 HTML，但直接决定键盘用户能否发现并操作链接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
