Summary

The winning design from a recent competition by the Guild of Accessible Web Designers (GAWDS) has several accessibility issues which have been discussed on the GAWDS mailing list. One of the issues mentioned was relying on colour alone for links in the main content.

Author: Gez Lemon

Contents

GAWDS Redesign Competition

The Guild of Accessible Web Designers (GAWDS) recently held a competition to redesign their site. From what I understood, the purpose of the competition was to lead by example, and illustrate that accessible designs don't have to be boring. Unfortunately, the winning design has a few accessibility issues, as do many of the other entries.

Relying on Colour Alone

One of the comments I made about the winning design was that links were identified using colour alone, and assumed this contravened guideline 2 of WCAG 1.0; in particular checkpoint 2.1: Ensure that all information conveyed with colour is also available without colour, for example from context or markup (a priority 1 issue). According to Mel Pedley and Jim Thatcher, I'm wrong in my assumption. I'm prepared to accept I may have missed the point of this checkpoint, but their reasoning does not convince me. In response to my comment, Mel Pedley wrote:

Having looked at the design sans style in a graphical browsers and using Lynx (black on a grey background, I don't see how this impacts. It's perfectly accessible without colour and, as such, remains in line with WCAG 1.

The links were not distinguishable on the monitor I was using, and certainly weren't when I printed the page. I know, I know; I need a new monitor, replace the toner in my printer, and get new glasses. Having made such an assertive decision on behalf of people with visual impairments, Mel went on to explain how it's difficult to select a colour that would work for everyone:

I'd actually be very careful about trying to even attempt some sort of 'ideal' colour contrast within *any* design. No such beast exists. The needs of the various groups often run completely counter to one another. What benefits the visually impaired (high contrast) actively discrimates [sic] against the dyslexic (low contrast with strong preferences for the red/yellowe [sic] spectrum). Neither extreme is of much use to those with cognitive problems (high colour) or those with forms of autism (shades within a colour). Then there are people suffering from the various forms of colour blindness (require coloured elements to lie at opposing points in the colour spectrum).

Which left me wondering why she was so sure the colour issue was of no importance, and remained inline with WCAG 1.0.

Jim Thatcher shed some light on the issue, offering a variation of the example the W3C offer on Techniques for checkpoint 2.1.

Checkpoint 2.1 has nothing to do with contrast or CSS, but the problem of "fields marked in red are required" or push the green button. Don't convey information bv [sic] color alone. Use other means in addition to color. "Fields in red with * are required" and "push the green OK button."

Interestingly, the W3C's example comes under CSS Techniques, which is a strange place to put the example if this checkpoint has nothing to do with CSS. The only visual clue for a link in the GAWDS winning design is provided by colour alone. When someone else highlighted this to Jim, and suggested this could be a problem, he provided the following response:

Nope. Links and their attributes (like visited) are conveyed in the object model and reflected by mouse pointer, by focus rectangle, by "link" in a screen reader or high pitch voice in home page reader.

As Derek Featherstone of WATS.ca correctly pointed out, the object model isn't exposed to visitors, except in the final rendering of the page. Derek went on to point out that visitors unable to distinguish the links would either have to hunt them down with the mouse or a keyboard, unless they were fortunate enough to be using a screen reader.

The biggest clue as to whether checkpoint 2.1 applies to links can be found near the bottom of the W3C's CSS techniques example:

This will show you where you need to add redundant cues (example: hyperlinks are usually underlined on Web pages), or whether the cues are too small or indistinct to hold up well.

Not only are they talking about CSS, but explicitly mention links in the example. My interpretation of checkpoint 2.1 is that it is applicable to links. If links are part of a navigation system, providing a clue other than colour isn't applicable, as it would make sense by the context. When links are intermingled in the content, my advice would be to ensure you relay the fact it's a link by some other means; such as underlining the link.

Category: Accessibility.

Comments

  1. [highlighting-links.php#comment1]

    checkpoint 2.1: Ensure that all information conveyed with colour is also available without colour, for example from context or markup

    You mark up a hyperlink differently to the rest of your text - does this fit with the 'from context or markup' requirement?

    How would a blind person know you've underlined your links or coloured them green? Their screen reader knows its a hyperlink from the markup, not because it is underlined. If that was the case, wouldn't a screen reader think EVERY piece of underlined text was a hyperlink?

    Sighted people are the ones who REALY need to identify a hyperlink by visual clues alone. Partially sighted people may need additional clues other than a subtle (invisible to their eyes) colour change.

    (Note references here to 'you' and 'your' are generic, like the royal We - I'm not picking faults here just illustrating a point)

    Posted by Richard@Home on

  2. [highlighting-links.php#comment2]

    I agree with Derek (and implicitly, Richard). Screen reader users will be alerted to the fact it's a link through markup. People using a graphical browser will have to rely on colour. A breech of 2.1 IMHO

    Posted by Dave Ryan on

  3. [highlighting-links.php#comment4]

    I'd fail them on the colour criterion. It's probably less of an issue for things like the post footer, for example:

    [ Added at 2 pm by Jim Byrne | Add your comment (18) ]

    If I'm an impaired/low-vision user with a graphical browser (and there are more of those than there are users of screenreaders), I may not be 100% certain that I can click 'Jim Byrne' -- but the fact that 'Add your comment' is an instruction helps to indicate that it's a means for me to perform an action. They can probably get away with leaving some other cue off the links here.

    However, this piece from a post is less clear:

    The Guardian Unlimited catches up with Disability Rights Commission report and highlights new study: Company websites fail disabled people.

    If I can't distinguish the colour, how do I know what to click - if that even occurs to me at all? 'New study?' The title? 'Guardian Unlimited?' Answer: I take my mouse and I hover over stuff, waiting for a pointing hand.

    It is worth noting that red turns black for a good number of people with a colour deficiency.

    Posted by Raena Armitage on

  4. [highlighting-links.php#comment5]

    You mark up a hyperlink differently to the rest of your text - does this fit with the 'from context or markup' requirement?

    The people who think that identifying links by colour alone is acceptable, believe so because they are marked up using the anchor element. So, yes, as it's marked up correctly, it could act as a get-out clause for this particular guideline. The fact is, if you deliberately choose to override a user agent's default settings for links and determine links by colour only, it will have a negative impact on some visitors. If you believe in empowering users, you could argue that a person who had trouble determining links by colour alone should have a user-defined style sheet:

    
    a
    {
        text-decoration: underline !important;
    }
    

    I'm all for empowering visitors, but you have to be realistic about what you expect them to be able to do. I don't know many people outside the industry that know how to create a user-defined style sheet, let alone how to implement it in their particular user agent. But I suppose it could be argued that the user has some responsibility. I just think in this case it's too much to expect, and adds an unnecessary barrier.

    Partially sighted people may need additional clues other than a subtle (invisible to their eyes) colour change.

    Yes; and also people whose monitor is unable to relay the colour (by design or by fault). It's also worth noting that people who are blind (or partially sighted) are not the only users of screen readers. In this case, they're the fortunate ones as they will have the links identified for them.

    It's probably less of an issue for things like the post footer

    I agree; there are instances when a link can be determined by context.

    Posted by Gez on

  5. [highlighting-links.php#comment6]

    What kind of organization asks potential members to pledge an interest in accessibility, to prove their capability with prior work, and then award a design contest winner's trophy to a pretty design that is weak on accessibility?

    The emperor has no clothes!

    Posted by Bob Easton on

  6. [highlighting-links.php#comment8]

    Sorry for my previously off topic post Gez, to get back on topic, I'm in favour or underlining links in content, not because of any guideline, but because it is the default behaviour of browsers. I'd like to think I'm catering to the needs of people who dont realise links are not always underlined (however small that minority might be).

    It can be argued that underlining links is pointless if you use a colour that certain colour-blind users cannot see properly - like most things its case of trial and error.

    The only place I would not always underline links is when Im using them as the main navigation, where I may style a list of links to make them fit in with the design more, hopefully users will realise they are navigational links and by keeping the layout constant throughout the site we can in a small way enforce that belief.

    Posted by Si on

  7. [highlighting-links.php#comment9]

    I think perhaps what this competition (and its resulting winning entry) may have proved is that is impossible to create a truly accessible website that will still look good. I really hope that isn't the case as I am all for making the world wide web somewhere that everybody can go to get the information/entertainment they want or need. I think the competition, and the Guild itself have been caught up in mistaking standards for accessibility.

    If you're going to market yourself as a a body to champion accessible web design, then your home page needs to be WAI-AAA compliant.

    Posted by Alex on

  8. [highlighting-links.php#comment10]

    I think perhaps what this competition (and its resulting winning entry) may have proved is that is impossible to create a truly accessible website that will still look good.

    It is ironic that a competition from a guild that purports to advocate accessibility can leave at least one person believing that there's no way to have an attractive and accessible site. It, of course, is possible for all of the entries to have looked as they do and also be accessible. All it proves to me is that the guild has low standards.

    Posted by Zoe on

  9. [highlighting-links.php#comment11]

    All it proves to me is that the guild has low standards.

    I think you might have hit the nail on the head there, Zoe.

    I would have thought that it is possible to create an attractive site which is accessible (I aim to create that with every site I build), my comment was more a case of what their choice of winner implies, not fact.

    Posted by Alex on

Comments are closed for this entry.