链接访问后刷新颜色回到初始_如何使链接可访问（提示：颜色不够）

链接访问后刷新颜色回到初始

Link accessibility is one of the most important aspects of usability. However, designers often don't understand what it takes to make links accessible. Most frequently, they only distinguish links by color, which makes it hard for users with visual disabilities to spot them in text blocks — even if high color contrast is used.

链接可访问性是可用性的最重要方面之一。 但是，设计人员通常不了解使链接可访问所需的时间。 大多数情况下，它们仅按颜色区分链接，即使使用高色差，视觉障碍的用户也很难在文本块中发现它们。

As a rule of thumb, accessible links shouldn't rely solely on colors. Partly because users with low vision, color deficiency, and other visual  impairments can't always recognize this kind of link, but also because  it's easier for regular users to skim through the content if links are better emphasized.

根据经验，可访问的链接不应仅依赖颜色。 部分原因是视力低下，色彩不足和其他视觉障碍的用户不能始终识别这种链接，还因为如果更好地强调链接，普通用户更容易浏览内容。

However, it's not always easy to find out how to create accessible links that match your website design. It's also possible to overdo it by using too many visual signifiers that might confuse the  user.

但是，找出如何创建与您的网站设计相匹配的可访问链接并不总是那么容易。 也可能通过使用太多可能使用户感到困惑的视觉指示符来过度使用它。

链接类型 (Link types)

When we speak about links, we usually think of the classic blue links with an underline, however there are actually different kinds of links,  such as:

当我们谈论链接时，通常会想到带下划线的经典蓝色链接，但是实际上存在不同种类的链接，例如：

• body text links,
  正文文本链接，
• headline and subtitle links,
  标题和字幕链接，
• menu links,
  菜单链接
• buttons,
  纽扣，
• image links,
  图片链接，
• video links,
  视频链接
• audio links,
  音频链接
• and more.
  和更多。

In this article, I'll only speak about the first group: body text links. Don't read it as a guideline but rather an experiment for understanding  what can be done for more accessible links.

在本文中，我仅讨论第一组：正文文本链接。 不要将其作为指导来阅读，而应该做一个实验，以了解可以为更易访问的链接做什么。

根据WCAG 2.0的可访问链接 (Accessible links according to WCAG 2.0)

According to WebAIM's guidelines about links and hypertext, WCAG 2.0 has two additional requirements for body text links:

根据WebAIM关于链接和超文本的指南 ，WCAG 2.0对正文链接有两个附加要求：

1. The link text must have a 3:1 contrast ratio from the surrounding non-link text.
   链接文本与周围的非链接文本的对比度必须为3：1。
2. The link must present a "non-color designator" (typically the  introduction of the underline) on both mouse hover and keyboard focus.
   该链接必须在鼠标悬停和键盘焦点上都显示一个“非颜色指示符”(通常带有下划线)。

Web browsers come with a default link styling that meets these  requirements. You can check it out by disabling all additional CSS  styles using the Web Developer browser add-on or another dev tool. For example, this is how the  homepage of the Mozilla Developer Network looks like in Chrome:

Web浏览器带有符合这些要求的默认链接样式。 您可以使用Web Developer浏览器加载项或其他开发工具来禁用所有其他CSS样式，以进行检查。 例如，Mozilla开发人员网络的主页在Chrome中是这样的：

It's a very basic styling for sure, but it's still styling: the  underlined blue links are well-known and internet users can easily  recognize them. It's not a coincidence that the Nielsen-Norman Group  also names blue the safest link color choice in its Beyond Blue Links: Making Clickable Elements Recognizable article.

当然，这是一个非常基本的样式，但仍然是样式：带下划线的蓝色链接是众所周知的，互联网用户可以轻松识别它们。 尼尔森·诺曼集团(Nielsen-Norman Group)在其“ 超越蓝色链接：使可点击的元素变得可识别”一文中也将蓝色命名为最安全的链接颜色选择并非偶然。

无障碍链接示例 (Examples of accessible links)

WebAIM doesn't recommend removing the underline using CSS, as "users are accustomed to see links underlined". Still, many of the biggest  websites don't follow this principle of link accessibility. Many times,  they don't only remove the underline from the default link state but also the :hover styles.

WebAIM不建议使用CSS删除下划线，因为“​​用户习惯于看到带有下划线的链接”。 尽管如此，许多大型网站仍未遵循链接可访问性这一原则。 很多时候，它们不仅会从默认链接状态中删除下划线，而且还会删除:hover样式。

But, why do they do that? Mainly for aesthetical reasons, however  underlined links don't necessarily have to be plain-looking and boring.

但是，为什么要这样做呢？ 主要是出于美学原因，但是带有下划线的链接不一定必须看起来很无聊。

1.边框底 (1. Border-bottom)

For instance, Bloomberg uses the border-bottom property to  mimic an underline in a different color. As you can see below, the link  texts are black while the underlines are blue, which gives a stylish  design to the links.

例如，彭博社使用border-bottom属性模仿其他颜色的下划线。 如下所示，链接文本为黑色，而下划线为蓝色，这为链接提供了时尚的设计。

Perhaps Bloomberg's links could further benefit from bold letters, but  it's a good example that underlines can be used for links creatively, not  just in the usual way.

彭博社的链接也许可以进一步从粗体字母中受益，但这是一个很好的例子，下划线可以创造性地用于链接，而不仅仅是通常的方式。

2.下划线 (2. Reverse underline)

The Verge uses a different approach to create underlines for body text  links. Here, underlines are present by default, however they are removed  when the user hovers over the link. When the underline disappears, the  color also changes subtlely, from pink to magenta (however this color  change is barely recognizable).

边缘使用另一种方法来创建正文文本链接的下划线。 此处，默认情况下显示下划线，但是当用户将鼠标悬停在链接上时，下划线将被删除。 当下划线消失时，颜色也会从粉红色变为洋红色(但是几乎无法识别)。

The presence of underlines in the default state helps readers easily  notice the links, even within large text blocks. And, when they hover  over the link, the state change is instantly visualized by the  disappearing underline. An unusual choice, for sure, but it still  follows the principle of using non-color designators for accessible  links.

默认状态下带有下划线的内容可以帮助读者轻松注意到链接，即使在较大的文本块中也是如此。 而且，当他们将鼠标悬停在链接上时，消失的下划线会立即显示状态变化。 当然，这是一个不寻常的选择，但它仍然遵循为访问链接使用非颜色指示符的原则。

3.图标 (3. Icons)

You can also help users recognize links by adding tiny icons next to  them. For example, some news sites add a video icon next to the links  that point to videos (however, embedding videos is a more widely used  practice these days).

您还可以通过在链接旁边添加小图标来帮助用户识别链接。 例如，某些新闻网站在指向视频的链接旁边添加了一个视频图标(但是，如今，嵌入视频是一种更为普遍的做法)。

WebAIM chose an all-inclusive solution for link accessibility. Besides  the underline, they also add a small icon after each external link. In  this way, the icon doesn't only serve as an extra visual signifier but  also clearly distinguishes external and internal links.

WebAIM选择了全方位的解决方案以实现链接访问。 除了下划线，它们还在每个外部链接之后添加一个小图标。 这样，该图标不仅可以充当额外的视觉指示符，还可以清楚地区分外部和内部链接。

You don't necessarily need to create a link icon by yourself. For instance, Font Awesome has an external link icon that you can quickly add to your links.

您不一定需要自己创建链接图标。 例如，Font Awesome有一个外部链接图标 ，您可以快速将其添加到链接中。

4.链接文字 (4. Link text)

As screen readers notify users when they come across a link, it's not  recommended to use phrases such as "link to" or "follow this link" for the link text. Instead, you should provide link texts that describe the main content of the link. It makes it easier for users to decide if they  want to click the link, which is especially important for users with cognitive disabilities.

由于屏幕阅读器会在用户遇到链接时通知用户，因此不建议在链接文本中使用诸如“链接到”或“跟随此链接”之类的短语。 相反，您应该提供描述链接主要内容的链接文本。 它使用户可以更轻松地决定是否要单击链接，这对于认知障碍用户尤其重要。

WCAG 2.0 even has a recommendation on how to provide proper link texts, with a handful of useful examples (mainly for image links, though).

WCAG 2.0甚至对如何提供正确的链接文本提出了建议，并提供了一些有用的示例(尽管主要用于图像链接)。

If you want to see an example of proper link text I would mention the  Gov.uk website that publishes governmental information in the UK. For  example, check out their Set up a business page.

如果您想查看适当的链接文本的示例，我会提到Gov.uk网站，该网站在英国发布了政府信息。 例如，请查看他们的“ 设置公司”页面。

Have a look at, for instance, the Find out more about being a sole trader and how to register line on the screenshot above. Note that they put the anchor tag on the  part that describes the purpose of the link ("being a sole trader and  how to register") instead of the action verb ("find out more").

例如， 查看一下有关如何成为独家商人的更多信息，以及如何在上面的屏幕截图中注册行。 请注意，他们将锚标记放在描述链接目的的部分(“成为唯一交易者以及如何注册”)上，而不是动作动词(“查找更多”)上。

title属性的争议角色 (The controversial role of the title attribute)

The role of the title global attribute in link accessibility is an interesting question. If you add it to a link, the extra information appears somewhere around the link when users hover it.

title全局属性在链接可访问性中的作用是一个有趣的问题。 如果将其添加到链接中，则当用户将其悬停时，多余的信息将显示在链接周围的某处。

For instance, take the following line of HTML:

例如，采用以下HTML行：

<a href="#" title="Extra information">Hover this link but don't click it.</a>

<a href="#" title="Extra information">Hover this link but don't click it.</a>

It's displayed like this in the browser: Hover this link but don't click it.

它在浏览器中显示为： 悬停此链接，但不要单击它。

I've long thought that adding the title attribute to links  is a good practice for accessibility, as the extra information helps  users understand the purpose of the link.  However, WCAG 2.0 has a  slightly different view on the question.

我长期以来一直认为，将title属性添加到链接中是一种可访问性的好习惯，因为额外的信息可帮助用户理解链接的目的。 但是，WCAG 2.0在此问题上的看法略有不同。

On their "Supplementing link text with the title attribute" page, they mention several accessibility problems. For example, the title attribute isn't available to assistive technology and keyboard-only  users. Besides, it disappears after about five seconds in some user  agents, which usually doesn't leave enough time to read it.

在他们的“ 用title属性补充链接文本 ”页面上，他们提到了一些可访问性问题。 例如， title属性不适用于辅助技术和仅键盘用户。 此外，在某些用户代理中大约五秒钟后它消失了，这通常没有足够的时间来读取它。

On the whole, WCAG 2.0 doesn't advise against the title attribute but recommends careful usage. One thing is sure, never use title for important information that is not available in another form, such as warnings. On another note, if title can be used only for unimportant information, is it worth using at all?

总体而言，WCAG 2.0不建议使用title属性，但建议谨慎使用。 可以肯定的是，切勿对其他信息无法使用的重要信息(例如警告)使用title 。 另一方面，如果title仅可用于不重要的信息，那么是否值得使用？

链接状态 (Link states)

There are five different link states, represented by CSS pseudo-classes: :hover, :focus, :active, :visited, and :link.

有五种不同的链接状态，由CSS伪类表示:hover ， :focus ， :active ， :visited和:link 。

It's an open question whether it's better for accessibility to style all  link states differently or not. If you use different style rules for  each state, users are notified about every change indeed, however is  that always a good thing? Too many state changes can cause information  overload and confusion to the user.

这是一个悬而未决的问题，对于以其他方式设置所有链接状态的可访问性是否更好。 如果对每个状态使用不同的样式规则，则确实会向用户通知有关每个更改的信息，但这总是一件好事吗？ 状态更改太多会导致信息过载和用户混乱。

Personally, I tend to create one style for the default link state, a second one for the :hover, :active, and :focus states, and sometimes a third one for :visited links. However, I still can't tell if this is the best solution for  accessibility. If you are interested in the topic here's an interesting StackOverflow UX discussion on whether the styling of the :focus and :hover states should be the same or distinct.

就个人而言，我倾向于为默认的链接状态创建一种样式，为:hover ， :active和:focus状态创建第二种样式，有时为:visited链接创建第三种样式。 但是，我仍然无法确定这是否是可访问性的最佳解决方案。 如果您对该主题感兴趣，这里是一个有趣的StackOverflow UX讨论 ，内容是:focus和:hover状态的样式应该相同还是不同。

However, there's an important thing you should keep in mind by all means. Don't remove the dotted outline that browsers use for the :focus state. Keyboard (tab) navigation will be useless if the focused element is not visible on the screen. If you remove the dotted outline, keyboard users will literally lose focus. If you're annoyed by the default outline style make it less obtrusive with extra styling, but don't remove it.

但是，您必须牢记一件重要的事情。 不要删除浏览器用于:focus状态的虚线轮廓。 如果焦点元素在屏幕上不可见，则键盘(选项卡)导航将无用。 如果删除虚线轮廓，键盘用户将失去焦点。 如果您对默认的轮廓样式感到厌烦，请使用额外的样式使其不那么引人注目 ，但请不要将其删除。

阅读更多 (Read more)

In my blog, I cover accessibility-related topics that are less widely discussed. If you want to read more, check out my article about why software documentation is part of accessibility, too.

在我的博客中，我讨论了与可访问性相关的主题，这些主题讨论得很少。 如果您想了解更多信息，请查阅我的文章，该文章也解释了为什么软件文档也是可访问性的一部分 。

翻译自: https://www.freecodecamp.org/news/link-accessibility-colors-are-not-enough/

链接访问后刷新颜色回到初始