鏈接訪問后刷新顏色回到初始

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/

鏈接訪問后刷新顏色回到初始