E-mail List Archives
Thread: Examples for accessible, attractive links (without underlines)?
Number of posts in this thread: 7 (In chronological order)
From: Preast, Vanessa
Date: Fri, Jul 01 2016 9:15AM
Subject: Examples for accessible, attractive links (without underlines)?
No previous message | Next message →
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.
From: Jennifer Sutton
Date: Fri, Jul 01 2016 10:19AM
Subject: Re: Examples for accessible, attractive links (without underlines)?
← Previous message | Next message →
Vanessa and all:
Perhaps some of the resources below my name may prove helpful. I am not
able to select examples, but perhaps others on the list can identify
things for you, as starting points, or indicate whether they agree or
disagree with the resources I've collected.
I've especially focused on resources beyond the accessibility field.
I would suggest that perhaps it would be ideal to think about user
expectations, in terms of whether those who visit your site have the
expectation of having underlines, or what usability research says. In
other words, perhaps this question is not as WCAG-centric as you may be
imagining.
Just because you *can* leave off underlines, and people do, does that
mean end-users will have their expectations met, whether end-users use
AT or not?
Best,
Jennifer
Beyond Blue Links Making Clickable Elements Recognizable
http://www.nngroup.com/articles/clickable-elements/
Guidelines for Visualizing Links
http://www.nngroup.com/articles/guidelines-for-visualizing-links/
Links Should Really Look Like Links - Moz
http://moz.com/blog/links-should-really-look-like-links
Accessible links without underlines Chip Cullen
http://chipcullen.com/accessible-links-without-underlines/
On Link Underlines Adrian Roselli
http://adrianroselli.com/2016/06/on-link-underlines.html
From: Birkir R. Gunnarsson
Date: Fri, Jul 01 2016 10:45AM
Subject: Re: Examples for accessible, attractive links (without underlines)?
← Previous message | Next message →
Great list of resources!
Re your other question. The WCAG SC we are considering here is 1.4.1.
It applies only for links that are surrounded by text. The idea is
that you need to be able to distinguish a link from its surrounding
text )in other words, making sure users realize that clicking a
particular piece of text will cause something to happen).
When links are presented together in menus or blocks, the user should
quickly realize that everything in that block is a link.
Then of course, all text on a webpage needs to mee the 1.4.3 color
contrast of text and background requirement, whether it is actionable
text or not (with a few exceptions, see the spec).
On 7/1/16, Jennifer Sutton < = EMAIL ADDRESS REMOVED = > wrote:
> Vanessa and all:
>
>
> Perhaps some of the resources below my name may prove helpful. I am not
> able to select examples, but perhaps others on the list can identify
> things for you, as starting points, or indicate whether they agree or
> disagree with the resources I've collected.
>
>
> I've especially focused on resources beyond the accessibility field.
>
>
> I would suggest that perhaps it would be ideal to think about user
> expectations, in terms of whether those who visit your site have the
> expectation of having underlines, or what usability research says. In
> other words, perhaps this question is not as WCAG-centric as you may be
> imagining.
>
>
> Just because you *can* leave off underlines, and people do, does that
> mean end-users will have their expectations met, whether end-users use
> AT or not?
>
>
> Best,
>
> Jennifer
>
>
> Beyond Blue Links Making Clickable Elements Recognizable
>
> http://www.nngroup.com/articles/clickable-elements/
>
>
> Guidelines for Visualizing Links
>
> http://www.nngroup.com/articles/guidelines-for-visualizing-links/
>
> Links Should Really Look Like Links - Moz
>
> http://moz.com/blog/links-should-really-look-like-links
>
>
> Accessible links without underlines Chip Cullen
>
> http://chipcullen.com/accessible-links-without-underlines/
>
>
> On Link Underlines Adrian Roselli
>
> http://adrianroselli.com/2016/06/on-link-underlines.html
>
>
>
>
> > > > >
--
Work hard. Have fun. Make history.
From: Preast, Vanessa
Date: Fri, Jul 01 2016 12:49PM
Subject: Re: Examples for accessible, attractive links (without underlines)?
← Previous message | Next message →
Thanks for the resources and the explanation.
So if I'm understanding correctly...a list of non-underlined links in a block or menu-like structure might only need to meet the 1.4.3 color contrast since there is no surrounding non-link text which might confuse the user? It is when non-link text and link text (without underline/bold/italic, etc) are mixed together in a paragraph that the extra color contrast between link and non-link becomes critical?
How does the underline on hover or on focus relate to these WCAG SC?
Best,
Vanessa
From: Guy Hickling
Date: Mon, Jul 04 2016 5:37PM
Subject: Re: Examples for accessible, attractive links (without underlines)?
← Previous message | Next message →
Vanessa,
It's perhaps a little more complicated, because in the situation you
mention, of a list of non-underlined links with no surrounding text,
then that would include many cases where there is nothing at all to
indicate visually that there are actually links present!
G183 specifies two required things: the 3 : 1 colour contrast, and the
change in font styling on both hover and focus. So if the required
colour contrast with surrounding text is not there simply because the
surrounding text is not there, then G183 cannot be used to satisfy
SC1.4.1. We have to fall back on G182 and provide underlines (or
bold/italics etc), or the links must clearly be shown to be links in
some other way (as every WCAG Technique says in their footnotes, they
don't have to be followed if there is an equally good alternative
way).
In line with that, main menus can get away with having no underlines
because they generally follow a well recognised patten that has been
followed since the dawn of the internet. We recognise a main menu
instantly from it's location, context and content. They are somewhere
at the top of the page (usually in the header), and usually contain
such obvious giveaways as "Home", "Contact Us", and so on.
Menus in sidebars are usually equally recognisable even without
underlines. (If we create one that isn't obvious, then we would have
to apply G182.) Another way to show a list of items is links is to say
so as, perhaps, in all those pages headed "Useful Links" that contain
nothing but names of companies or websites or other things.
There's just one other point to consider. G183 begs the question as to
what is "surrounding text". If we look at the examples W3C themselves
give (for instance at
https://www.w3.org/WAI/WCAG20/Techniques/working-examples/G183/link-contrast.html),
we realise the WCAG intends it to refer to blocks of text that
actually embed the links within the sentences of text. Someone might
say that a page's header, footer, and sidebars surround the text,
which they do of course, physically, but that isn't what G183 means by
the phrase. We would expect the header and footer to likely have
wildly different colours than other content, so the colour contrast
would not indicate the presence of links in the main content.
As to the question of hover and focus requirement, the G183 document
says, "This technique describes a way to provide additional cues on
hover and focus so that users who may have difficulty perceiving color
differences or have low vision can identify them." A 3 : 1 contrast
not not actually all that good, which is why the contrast between text
and its background is much higher at 4.5. In the "working-examples"
link above W3C illustrate how a weak contrast like that, in some
colours, will look to many colour blind people. But if someone in
doubt hovers over something they suspect might be slightly different
in colour, and it then suddenly displays an underline or something,
then they know for certain it's a link!
What it comes down to is that the WCAG sometimes has to be pragmatic.
As they said in some other connection (I forget where right now), if
they make rules that are too strict then many designers would refuse
to bother with compliance. G183 is a compromise in order not to
alienate those who hate underlined links! But it is not the
recommended best practice.
Regards,
Guy Hickling
From: Preast, Vanessa
Date: Tue, Jul 05 2016 11:51AM
Subject: Re: Examples for accessible, attractive links (without underlines)?
← Previous message | Next message →
Thank you Guy! This was extremely helpful.
Best,
Vanessa
From: Birkir R. Gunnarsson
Date: Tue, Jul 05 2016 3:11PM
Subject: Re: Examples for accessible, attractive links (without underlines)?
← Previous message | No next message
Also keep in mine WCAG 2.4.7, focus indicators must be visible.
So if an element, such as a link, is focusable, a focus indicator
could be the underline.
There is no WCAG SC about hover states.
On 7/5/16, Preast, Vanessa < = EMAIL ADDRESS REMOVED = > wrote:
> Thank you Guy! This was extremely helpful.
>
> Best,
> Vanessa
>
>