链接文本必须独立传达意图，避免“点击这里”等无意义表述；应明确内容、格式、大小，或用aria-label补充；图标需正确标记可访问性；确保整站策略一致。

链接文本本身没意义，屏幕阅读器读出来就是“点击这里”

这是最常见也最容易被忽略的问题。当链接文字是“点击这里”“了解更多”“查看详情”这类通用词时，脱离上下文后完全无法传达目标内容。屏幕阅读器用户可能正快速跳转链接列表，听到一串重复的“点击这里”，根本不知道该选哪个。

解决方法很简单：把链接文本写成能独立说明意图的短语。

• ❌ <a href="report.pdf">点击下载</a> → 屏幕阅读器读作“点击下载”，但没说下什么
• ✅ <a href="report.pdf">下载2025年Q3销售报告（PDF，2.1MB）</a> → 明确内容、格式、大小
• 如果必须保留简洁文案（比如导航栏），用 aria-label 补充，但不能替代可见文本：<a href="/search" aria-label="搜索网站内容">?</a>

同一页面多个相同链接文本，但指向不同地址

比如页面里有 3 个“联系我们”，分别跳转到邮箱、表单页、客服电话页。屏幕阅读器用户听到三次“联系我们”，却无法区分差异，只能逐个点开试错。

这种情况必须打破文本一致性，用上下文或 aria-label 区分：

立即学习“前端免费学习笔记（深入）”；

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 在列表项中，直接写清差异：<a href="mailto:support@example.com">发邮件联系技术支持</a>
• 若视觉设计不允许改文字，至少加 aria-label：<a href="/contact/form" aria-label="在线填写联系表单">联系我们</a>
• 避免只靠 CSS 隐藏文字来“优化”链接文本——text-indent: -9999px 或 visually-hidden 类若没正确实现，会导致辅助技术完全读不到

图标+文字组合链接，图标没处理可访问性

很多按钮用图标（如 ?、↗️）加文字构成，但图标本身是 <img> 或伪元素，容易被读屏工具误读或跳过。

关键原则：只要图标承载语义，就必须让辅助技术感知到；否则就明确标记为装饰。

• 如果是 <img> 图标：<img src="pdf-icon.svg" alt=""> 下载用户协议 —— alt="" 表示纯装饰，含义全由后面文字承担
• 如果是字体图标（如 Font Awesome）：<span class="fa-solid fa-file-pdf" aria-hidden="true"></span> 下载用户协议 —— aria-hidden="true" 主动屏蔽，不干扰朗读
• 绝对不要只放图标没文字，哪怕你加了 title —— title 不被所有读屏工具支持，且移动端基本无效

链接放在段落中间，上下文被截断导致语义丢失

比如一段话：“请查阅我们的

<a href="/privacy">隐私政策</a>以了解数据使用方式。” 屏幕阅读器若开启“链接模式”，会把“隐私政策”单独拎出来读，前后句子全丢，用户完全不知道这个政策管的是什么。</p>
<p>这不是 bug，是交互模式导致的必然结果，所以得主动适配：</p>
<ul>
<li>确保链接文本自身具备完整语义，哪怕脱离句子也能理解用途</li>
<li>避免在长句中嵌套多个链接，尤其当它们语义相近时（如连续三个“参见XX条款”）</li>
<li>必要时用 <code>aria-describedby

关联解释性文本：<p id="privacy-desc">本政策说明我们如何收集、使用和保护您的个人信息。</p><a href="/privacy" aria-describedby="privacy-desc">隐私政策</a>

真正难的不是写对某个链接，而是保持整站链接文本策略一致——比如所有PDF下载都带格式和大小，所有外部链接都标注“新窗口打开”，这些细节一旦松动，可访问性就会断层。最容易被忽略的，其实是 CMS 后台编辑人员随手输入的“点击此处”链接，它们不会出现在前端代码审查里，却天天出现在用户耳边。