在网页中添加基于文本的链接时，请仔细选择要超链接的字词。 一般经验法则是始终链接关键字。链接关键字将：
- 帮助改进搜索引擎优化
- 向正在扫描您网页的视力正常的用户提供更多详细信息
- 为视力不佳但可能正在使用屏幕的人提供背景信息 阅读器或其他辅助技术
链接、屏幕阅读器和辅助功能
链接的文本应该有意义断章取义。这是因为屏幕阅读器经常从一个链接导航到另一个链接，跳过周围的链接 文本。他们将按顺序大声朗读每个链接。
例如，如果您的链接文本是“Copper Country”，那么屏幕阅读器会显示 ”链接铜国”用户会知道链接到的网页可能与 Copper 有关 国家。相反，如果您的链接文本是“单击此处”，屏幕阅读器会说链接请点击此处用户将不知道链接的网页可能是关于什么的。
好例子
<p>足球比赛结果和<a href="/tour/copper-country/">铜国</a>有小镇的感觉。学生和社区成员说这是正确的，但事实并非如此
大到容易迷路，但也不能太小。理想的通话地点
家。</p>
坏例子
<p>足球比赛结果和铜乡有一种小镇的感觉。学生和社区
成员们说刚刚好，不是太大容易迷路，也不是太小，
要么。一个理想的家。<a href="/tour/copper-country/">点击此处</a>了解更多。</p>
屏幕阅读器用户可以利用的另一个功能是能够订购 页面链接按字母顺序。如果用户已经记住了特定的链接，例如 作为联系表格或员工名单。保留最重要的关键词很重要 在开始您的链接文本。 “员工列表”将按预期按字母顺序显示。 》查看 我们的员工名单”不会。
编写链接文本的提示
使用以下提示来确保链接文本易于访问：
- 避免使用网址作为链接文本；尤其是当它很长或很复杂时
- 人类或屏幕阅读器可能不容易阅读网址
- 链接的短语尽可能简短，同时在脱离上下文的情况下仍然有意义。
这将节省屏幕阅读器用户的时间，因为需要说的更少。例如，
- “赠送礼物”优于“在线赠送礼物，请点击此处”
- “联系我们”优于“您可以通过以下方式联系我们”
- 链接至少一个完整单词。两个词通常更好。
- 只有字母或符号的链接将很难点击，并且不会 提供上下文
- 如果您必须向链接添加操作提示，请将其放在最后。例如，
- “联系我们（打开弹出窗口）”是“链接打开弹出窗口：联系我们”
- 请勿在文本中添加“链接”一词
- 尽量确保网页上的每个唯一链接都使用唯一的链接文本
- 如果您有两个不同的员工列表链接可以转到同一页面，那也没关系。 如果他们进入不同的页面，那应该是不同的，例如“数字服务” 工作人员”和“打印服务人员”
- 如果您经常使用“阅读更多”，想象一下这对于屏幕来说会有多令人沮丧 阅读器用户在没有上下文的情况下一遍又一遍地听到“阅读更多”
- 切勿包含空链接，使用href=""
链接图像
对于某些网页，将图片链接到网页可能比较合适，而不是 链接文本。在这些情况下，屏幕阅读器将读取图像的替代内容 文本（ALT 标签）作为链接文本。 ALT 标记必须同时包含内容和功能图像的。如果图像是装饰性的，那么只需要功能。
装饰图片示例
<p><a href="/tour/copper-country/"><img src="my-picture.jpg"alt="员工名单"/></a></p>
信息图像示例
<p><a href="/tour/copper-country/"><img src="my-picture.jpg"alt="图表显示 200 英寸的总降雪量；链接到每月小计”/></a></p>
可选编程技术
在某些情况下，您可能希望保留一般链接文本，例如“[了解更多]”。 在这些情况下，您可以使用 aria-label 或 aria-labelledby 来提供链接上下文 屏幕阅读器。
aria-标签示例
大多数屏幕阅读器会大声读出aria 标签代替链接文本的属性。请注意，如果您使用 aria-label，它必须包含可见标签。例如，与铜国相关的“了解更多”链接可以编码如下：
<p class="right"><a href="/tour/copper-country/"aria-label="了解有关 Copper Country 的更多信息">了解更多</a></p>
aria-labelledby 示例
在某些情况下，附近的标题可能是某个内容的完美标签 通用链接。在这种情况下，您可以使用将该标题连接到常规链接aria-labelledby. 请注意，由于可见标签必须包含在无障碍名称中， 此示例同时使用标题的 id 和链接本身的 id，以便 还包括“了解更多”。
<h2id="铜国家">关于铜国</h2><p>足球比赛结果和铜乡有一种小镇的感觉。学生和社区
成员们说刚刚好，不是太大容易迷路，也不是太小，
要么。</p><p class="right"><a href="/tour/copper-country/"id="更多链接" aria-labelledby="more-link Copper-country">了解详情</a></p>
而不是说“链接，了解详情，”屏幕阅读器会显示“链接，了解有关铜之国的更多信息。"
测试链接文本
使用屏幕阅读器读出网页上的每个链接是最好的测试 做。但是，如果您无法使用屏幕阅读器，请阅读链接的文本 您的每个链接都响亮。你正在阅读的人会明白什么吗 您仅根据所说的链接文字链接到的内容？
了解更多
要详细了解描述性链接文本：
现代校园 CMS
要在网页内容中创建链接，请突出显示您的文字或图片 然后点击中的链接图标或使用快捷键 Cmd/Ctrl + K。
添加aria 标签或aria-labelledby属性，使用导航至源代码.
添加图像替代文本在您的页面正文中，阅读下面的第四步。要修改网页正文中已有图片的替代文本， 选择图像，然后点击“插入/编辑图像”按钮。