WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples for accessible, attractive links (without underlines)?

for

From: Guy Hickling
Date: Jul 4, 2016 5:37PM

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