Anchor tag accessibility on SO

Question

I noticed this question on SO Meta, and I was curious what the best solution would be. I understand the accessibility concerns, and I would like to see the need met, but I'm not terribly fond of text-decoration: underline;. I'm fine with it for the active and hover pseudo-classes, but I don't like the idea of underlines all the time on anchor tags.

1. Is there a better, alternative solution?
2. Does the bias against always underlining anchor tags stem from something?

It seems to be fairly common practice to not underline anchor tags without the hover or active pseudo-classes.

Answer 1

I cannot answer #2, but I can take a stab at #1 with some explanation.

Background

The Web Content Accessibility Guidelines (WCAG) 2.0 (the basis for Section 508 in the US, some international regulations, and the ADA guidelines that the DoJ has used in recent lawsuits) have some guidelines on this.

Success Criterion (SC) 1.4.1: Use of Color:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

In short, links should not rely on color alone to indicate that they are links. This is a Level A requirement.

Level A means this is the minimum level of compliance (you must meet all Level A). Level AA is the next level of requirements (you should meet all Level AA).

All lawsuits have settled at Level A and AA and most guidelines based on WCAG 2.0 use A and AA as the base level of support.

Parameters

There are guidelines to meeting this SC offered with examples.

G182: Ensuring that additional visual cues are available when text color differences are used to convey information:

• The default formatting for links on a page includes presenting them both in a different color than the other text on the page underlining them to make the links identifiable even without color vision.
• An article comparing the use of similar elements in different markup languages uses colored text to identify the elements from each language. Elements from the first markup language are identified using BLUE, bolded text. Elements from the second are presented as RED, italicized text.
• A news site lists links to the articles appearing on its site. Additional information such as the section the article appears in, the time the article was posted, a related location or an indication that it is accompanied by live video appears in some cases. The links to the articles are in a different color than the additional information but the links are not underlined, and each link is presented in a larger font than the rest of the information so that users who have problems distinguishing between colors can identify the links more easily.
• Short news items sometimes have sentences that are also links to more information. Those sentences are printed in color and use a sans-serif font face while the rest of the paragraph is in black Times-Roman.

Regardless of other visual cues, content links must still have sufficient contrast from the surrounding text.

G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them:

With this technique, a relative luminance (lightness) difference of 3:1 or greater with the text around it can be used if additional visual confirmation is available when a user points or tabs to the link. Visual highlights may, for example, take the form of underline, a change in font style such as bold or italics, or an increase in font size.

While using this technique is sufficient to meet this success criteria, it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with black/white color blindness. If there are not a large number of links in the block of text, underlines are recommended for links.

(emphasis added)

Within the accessibility community, since this technique was written prior to touch interfaces, the allowance for underlining only on hover or focus is generally considered insufficient given that touch devices (generally) don't offer those options when used without a keyboard or mouse.

Suggestions

The contrast issue should be addressed.

Underlines are the easiest way to meet this technique. Alternate solutions include bottom borders (like on the Meta site), background styling (though would conflict with code styles), outlines, and icons.

I recommend underlines on links in content (user-submitted questions and answers, not the nav or recurring page elements).

Edit

As a result of all this, I finished a post I had been writing that goes into more detail on visual link styling (underline or otherwise) with links to studies, UX research, and so on: On Link Underlines

It has a clear recommendation but outlines parameters to consider for when underlines are not a fit.

Answer 2

There are many ways to address this, essentially the aim is to differentiate links from other text on a site. While an underline is the default way that browsers make this apparent, you could use a high contrast color difference, a 'highlight' effect, a custom bottom border, or a link icon.

I think the best approach to this is to think of your aim and why you want it to look different. In this case to help show everyone it is a link, basic color differentiation is okay, but keep in mind not everyone is able to see that difference.

Adding visual changes on hover and focus also help to show that a piece of text might be a link.

I personally don't underline many of my links because if there are a lot of links on a page I find it visually distracting, although it can depend on the site.