WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color of link text

for

From: Patrick H. Lauke
Date: Jul 10, 2016 10:11AM

On 09/07/2016 01:09, Guy Hickling wrote:
> I think the solution for mobiles is easy enough. It just needs a media
> query, as used in responsive development, to detect small screens
> (everything from tablet size or less) and have it underline all links
> on them. (As usual we can except those links, such as menu options,
> that have other clear indication of them being links.) The query would
> be:
>
> @media all and (max-width: 1000px) {
> a:link, a:visited { text-decoration : underline }
> }
>
> The difficulty might be getting everyone to accept and apply this as a
> necessary part of accessibility even though not specified in the WCAG.
> Really, G183 ought to be rewritten to include a requirement for links
> to be underlined, in their unvisited and visited states, on anything
> with a screen small enough that it is likely to be a tablet or mobile.

I think this proposed solution is a bit facile/simplistic. The main
points for me are:

- G183 gives a loophole to keep a relatively low color contrast, under
the assumption that focus/hover can be used to further
complement/strengthen the visual indication of actionable items like links.

- mobile does not (with some caveats/exceptions that are very specific)
have a concept of hover, and focus is only applied as part of an
activation (so it's already too late at that point).

But going from that to "we just need to force/mandate underlines" is a
bit reductive. WCAG can't mandate specific solutions. The point is that
clear differentiation between, say, static text and links need to be
provided. This can take many forms (use of bold text, or an icon, or
similar).

I think part of the solution (which I'd suggest taking to WCAG WG) is
that G183 should include a note/clarification that it can't be used for
touchscreen interfaces (for lack of hover and only partial support for
focus).

> And it could include an example with a media query like the above.
> That way underline-hating designers can have their wicked way on
> desktops but, being allowed that, maybe they wouldn't mind quite so
> much if underlines appear on their mobile designs!

Can we drop the usual "designers hate accessibility" bashing?

> I realise of course that there is a somewhat blurred boundary in
> screen sizes between tablets and desktops, so the above 1000px is
> necessarily very arbitrary. But this approach would cater for the vast
> majority of touch screen devices.

Screen/viewport size is not a reliable indicator of "this is a
touchscreen" or, more generally "the user is using an input that is not
hover capable". At a stretch, you should start looking at Media Queries
Level 4 Interaction Media Queries for the "hover" feature - but note
that this will also give you potential false positives/negatives, see
https://dev.opera.com/articles/media-features/

> I've pitched the figure quite high
> as it would be better to have underlines appear on a few small
> desktops rather than no underlining on many larger touch screens.

P--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke