脱离上下文也能读懂的链接文本

屏幕阅读器用户实际上如何导航

在讨论如何编写链接文本之前，先了解人们在看不到页面时实际上如何使用链接会很有帮助。

屏幕阅读器提供了一个大多数视力正常用户不知道存在的快捷方式：按下单个按键（在大多数屏幕阅读器中通常是字母 L）会循环浏览页面上的所有链接，逐个朗读它们，脱离上下文。用户利用它来快速扫描页面，就像视力正常的用户用眼睛浏览标题和行动号召按钮一样。

如果你的页面上有十二个写着”阅读更多”的链接，那么这个列表就毫无意义。用户听到的是：“阅读更多。阅读更多。阅读更多。阅读更多……”他们无法判断其中任何一个会通向何处。

这就是链接文本无障碍性试图解决的根本问题：每个链接都必须能自我描述，因为当你通过链接导航时，上下文就消失了。

WCAG 怎么说

2.4.4 链接用途（在上下文中）（A 级）要求每个链接的用途都能仅从链接文本，或从链接文本连同其周围上下文（它所处的段落、列表项、表格单元格或标题）中确定。

2.4.9 链接用途（仅链接）（AAA 级）更进一步，要求仅从链接文本本身就能确定链接用途，而不依赖上下文。即使你只以 AA 合规为目标，力争达到这一点也是个好主意。

2.5.3 名称中的标签（A 级）要求当链接或按钮有可见文字标签时，无障碍名称必须以该文字开头。一个带有”了解更多关于无障碍的信息”标签、但 aria-label 为”点击这里”的图标按钮就不符合这条标准。

常见错误及应对方法

”点击这里”和”阅读更多”

这些是网络上最普遍的链接无障碍错误。

<!-- 失败：脱离上下文没有含义 -->
<a href="/blog/wcag-compliance">Read more</a>

<!-- 通过：能自我描述 -->
<a href="/blog/wcag-compliance">阅读我们的 WCAG 2.2 合规指南</a>

修复方法几乎总是很简单：用描述目的地或动作的文本替换含糊的短语。

泛泛的”这里”链接

“点击这里下载报告”因同样的原因而失败——链接词本身只是”这里”。

<!-- 失败 -->
<p>要查看完整结果，请点击<a href="/report.pdf">这里</a>。</p>

<!-- 通过：链接文本描述了所链接的内容 -->
<p>下载 <a href="/report.pdf">2025 年无障碍审计报告（PDF）</a>。</p>

注意括号中的 PDF 提示——这是一个好做法，可以告知用户点击链接将打开 PDF 而非网页。

指向相同目的地但文本不同的链接，或文本相同但目的地不同的链接

两者都会造成混淆。如果五个导航链接都写着”了解更多”但指向不同的服务页面，用户就无法预测他们会到达哪里。反过来，两个都写着”WCAG 合规指南”但通向不同页面的链接同样令人困惑。

仅含图标的链接和按钮

一个只包含图标——没有可见文字——的链接或按钮，必须通过 aria-label 或 aria-labelledby 提供无障碍名称。否则，屏幕阅读器会朗读图标图片的文件名，或者什么都不朗读。

<!-- 失败：被朗读为"链接，图形"或 SVG 文件名 -->
<a href="/social/twitter">
  <svg><!-- twitter 图标 --></svg>
</a>

<!-- 通过：aria-label 提供了无障碍名称 -->
<a href="/social/twitter" aria-label="QualiBooth 在 Twitter 上">
  <svg aria-hidden="true"><!-- twitter 图标 --></svg>
</a>

SVG 上的 aria-hidden="true" 可防止屏幕阅读器朗读 SVG 的标题或内容——因为链接本身已经有了标签，图标内容是多余的。

使用 aria-label 补充可见文字

当页面有多个”下载”链接，而你无法更改可见文字（一种设计限制）时，aria-label 可以扩展无障碍名称：

<!-- 可见文字是"Download"，但无障碍名称是完整的字符串 -->
<a href="/report-2025.pdf" aria-label="下载 2025 年无障碍报告 PDF">
  Download
</a>

这里要注意：WCAG 2.5.3 要求无障碍名称必须以可见文字开头。“下载 2025 年无障碍报告 PDF”以”下载”开头——很好。“2025 年无障碍报告 — 下载 PDF”则不是——不好。

在新标签页中打开的链接

在不加警告的情况下打开新标签页会让用户迷失方向，尤其是那些有认知障碍的用户或可能没意识到发生了什么的屏幕阅读器用户。请在链接文本中或通过视觉隐藏的说明来指示新标签页行为。

<!-- 在视觉上和对辅助技术都标示了新标签页行为 -->
<a href="https://example.com" target="_blank">
  查看示例报告
  <span class="sr-only">（在新标签页中打开）</span>
</a>

链接文本在不明显时也能奏效的情况

根据 WCAG 2.4.4，上下文可以合理地提供缺失的含义。如果一个”下载”链接位于表格单元格中，而其列标题写着”年度报告”、行标题写着”2025”，那么这个链接就是可接受的。上下文使其用途一目了然。

这与一段独立段落末尾的”阅读更多”链接不同。段落提供了上下文，但”阅读更多”仍然失败，因为该链接文本可以适用于任何段落——它没有唯一地标识目的地。

图片链接

当链接内容是图片而非文字时，图片的 alt 属性就成为链接的无障碍名称。替代文本应描述链接的目的地，而非图片本身。

<!-- alt 描述的是链接目的地，而非图片外观 -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="无障碍审计服务">
</a>

如果图片纯粹是装饰性的，并且在同一链接中伴有可见文字，那么该图片应使用 alt=""，以避免同一文本被朗读两次。

你可以自己运行的快速审计

打开你的页面，用屏幕阅读器调出链接列表（或安装免费的 HeadingsMap 或 WAVE 浏览器扩展，查看从上下文中提取出的链接）。通读这个列表。如果你无法仅从文本判断出每个链接通向何处，那它就需要改进。

最常见的修复方法是添加一个 <span class="sr-only">（视觉隐藏，但对屏幕阅读器可访问）来提供额外的上下文，或者干脆完全重写链接文本。重写始终是首选——它往往能改善每个人的可用性，而不仅仅是屏幕阅读器用户。

如需对你网站的链接及其他 WCAG 标准进行全面审查，我们的人工无障碍审计将链接用途作为更广泛审查的一部分，由每天使用辅助技术的测试人员进行。