WebAIM - Web Accessibility In Mind

E-mail List Archives

Examples for accessible, attractive links (without underlines)?

for

From: Preast, Vanessa
Date: Jul 1, 2016 9:15AM

It is my understanding that links should have a visual indicator in addition to color to differentiate them as links, otherwise they have even more stringent color contrast guidelines according to the following criteria:

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

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)

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


However, I've seen so many different variations of link appearance, I'm not entirely clear whether things are accessible or not. Additionally, it seems a struggle to ensure both a desirable visual design from the designers while also meeting the accessibility needs. This issue becomes more murky for me the more I think about it. Thus, I'm hoping that I can understand the pattern if I can accumulate a variety of attractive, but accessible link formatting approaches.

I often see navigation is not underlined, so is it exempt from the above guidelines? If so, why is it OK? For example, The W3C site (https://www.w3.org/standards/webdesign/accessibility) has menus on the left and right with no underlines and the quasi-navigation areas like the "Campus Accessibility News" or "On-Campus support" area of University of Colorado (http://www.colorado.edu/accessibility/) also don't have underlines. The contrast between text and background seems OK, but link color versus body text color isn't 3:1.

Please share any examples you have for visually attractive, but accessible links that may not use the typical underline style. This will help me better understand any nuance happening here as well as giving some options for our institution's designers.

Thanks for any assistance

Best,
Vanessa

p.s. I'll start by offering this example I saw from the Temple University accessibility site (https://accessibility.temple.edu/accessibility-resources-temple-university) which passed the WAVE checker with 0 contrast errors and used dotted underlines for a visually appealing design.