# 为网站和邮件设计更舒适的链接效果

<https://www.smashingmagazine.com/2021/12/designing-better-links-websites-emails-guideline/>

为什么"click here"和"by this link"是糟糕的选择？"read
more"为什么不容易理解？所有这些短语太过常见，以至于我们没有意识到问题出在哪里。

在这篇文章里，会介绍更易读的、能获得更多信息的链接设置方式。

### 有意义的链接 {#有意义的链接}

什么是超链接？

它是一个网址和一个可点击的元素（单词/短语/图片）的结合。这里只讨论文字元素形式的链接。

当一个链接的文本是"here"或"this"，很难用鼠标或手指定位它。而且，它缺乏透明度。读者不知道链接的背后是什么。一个网页、一个文件还是一个表格？读者必须重读整个句子或段落，来把握链接的内容。

与此相反，将链接赋予简洁的说明文本，让读者知晓链接内容，也易于点击。并且，如果能让链接突出于其上下文，这则是一个很好的选择。

### 显示链接 {#显示链接}

如果网址很短，而且网址能够表达所要链接的内容，直接放上链接也是一个不错的选择。

### 下载链接 {#下载链接}

如果一个链接是用来下载文件的，最好说明，文件的格式和大小。

当你想要分享同类文件的不同版本时，很好地设计版面，让这些链接看起来简洁清晰是有必要的。

### 链接还是按钮 {#链接还是按钮}

在网页或邮件中，并非所有链接同等重要。有些链接是要突出显示的，这时可以使用按钮。比如以下内容：

- "Subscribe to the newsletter"
- "Buy tickets"
- "Get the white paper"
- "Download the recording"

如果因为技术或时间约束，不能使用按钮。可以用一个方便快捷的方式：把链接放在单独一行，加粗，增大上下间距等一系列措施，让这个链接看起来很明显。

按钮的文本需要遵循一个规则，这样可以让读者更舒适。

- 言简意赅
- 理想情况下，以动词开头
- 诚实地发出动作（避免不愉快的步骤，如注册、看广告或提交个人数据）

### 丰富链接文本 {#丰富链接文本}

链接是互联网的主要功能之一。但在每一句话中都加入一个链接并不是最合适的做法（除非你在向维基百科类网站贡献内容）。

第一步是确保你真的需要全部链接。如果你能把这些链接变得易于理解，就不会出现问题；否则，你需要把所有链接都归在一组，用无序列表展示。

为链接分组是不错，但如果有想要突出的行为，一定要突出显示那些链接。

在一个段落中，一句话的结束有一个链接，下一句话的开头也是一个链接。这就很令人讨厌。看到太多链接，不知道点击哪一个。更好的做法是，让这两个链接距离更远一些，视觉上就更舒适一些。

如果一个段落的宽度是固定的，以链接在行内的方式编排文本。比如，链接在段落的开头。但是，不同种类的浏览器在不同种类的设备上，用不同的方式渲染内容。对某些用户来说，链接会发生变化。所以，将一组链接放在无序列表中更保险。

### 链接的可访问性 {#链接的可访问性}

可访问的链接并不仅仅看起来整洁清晰，而且还能正常起作用。

#### 区分度 {#区分度}

区分链接和正常文本，不能只依靠颜色差异。最典型的做法是为链接添加下划线。加粗也可行。

#### 颜色对比度 {#颜色对比度}

链接是重要的交互元素。尽可能遵守来自 WCAG 的对比度建议。

- AA 中度，用于大多数网站
- AAA 高，主要用于政府和残疾人士网站

#### 专注状态 {#专注状态}

#### 为使用屏幕阅读器的人进行的设置 {#为使用屏幕阅读器的人进行的设置}

盲人无法看到网页，他们通过屏幕阅读器听网页。

所以，在为看网页的人移除不必要的文字时，能不能让盲人听到关于链接的必要描述？

HTML 中的 `aria-label` 属性可以让盲人听到链接描述，只要为链接标签 a
添加该属性，并为其附加上说明文字即可。

#### 重复链接 {#重复链接}

在一个文章卡片上，有海报、标题、作者、关于文章的描述。有必要在所有位置都添加上文章链接吗？看网页的人可能感觉不到问题，但盲人们却不得不应付这么多遍地聆听这些内容。

另一个需要注意的地方：如果卡片本身是文章链接，作者位置链接着作者主页，标签链接着标签的详情。这样也是一个不错的组合。

在邮件中，如果有太多链接的话，也会给读者带来困扰。

### 进一步阅读 {#进一步阅读}

- "[Using `aria-label` For Link Purpose](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8.html)" Web Content Accessibility Guidelines
  (WCAG)
- "[How to make "Read more" links accessible](https://www.visionaustralia.org/services/digital-access/blog/how-to-make-read-more-links-accessible)" Vision Australia
- "[Writing Hyperlinks: Salient, Descriptive, Start with Keyword](https://www.nngroup.com/articles/writing-links/)" Marieke
  McCloskey, Nielsen Norman Group