WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Jul 5, 2016 3:11PM

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 REMOVED> > wrote:
> Thank you Guy! This was extremely helpful.
>
> Best,
> Vanessa
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Guy Hickling
> Sent: Monday, July 04, 2016 6:37 PM
> To: <EMAIL REMOVED>
> Subject: Re: [WebAIM] Examples for accessible, attractive links (without
> underlines)?
>
> 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
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.