Articles post

  • Designing for Accessibility, (Pt 1)

    Tuesday, March 25th, 2008 at 11:48 am

    Whilst most Accessibility work is done behind the scenes in the code, there are a few things that those involved before the coding process can take into account that will improve their work, not constrain it. For some reason there is a real lack of Accessibility information that is directed at creative types. Here are a few tips:

    There are many types of disabled people using the Web

    It is a misconception that making your site accessible means making it work for blind people only. People with other disabilities are using the web and need to be taken into consideration, such as:

    People with cognitive disabilities

    To help these people the copy needs to be written in a clear and simple language. Of course, this will help users without disabilities understand your website better.

    People with hearing disabilities

    These people will have trouble viewing any multimedia content that contains sound. Therefore, transcripts of any audio need to be provided, such as Flash or Video.

    People with motor disabilities

    These people will have trouble moving around a web page to navigate. Of course, the developer will be able to make the text of a website enlargeable, but things like small graphical buttons that can’t be resized need to avoided. This will also help people with low vision.

    People with low vision

    Apart from making sure graphical headings and text are not too small, it’s important to take into consideration colour contrast for people with low vision. Please see below for more information.

    Using Colour to convey information

    Colour can be an issue not only for people who are blind but also those who are partially sighted or colour blind. When creating a design, it is essential to make sure that where text appears on a background, there is enough of a contrast for all people to read it easily. This will even help those with good eyesight as they won’t have to squint to view your design.

    Colour Contrast

    Colour contrast is often overlooked in Design, but highly important; as it affects a wide range of people with sight problems, from Colour Blindness, to Short/Long sightedness. The WCAG 2 recommends a Luminosity Contrast Ratio algorithm to check that you have the correct contrast. There are many of these free online to check your contrast with, such as Gez Lemon’s Luminosity Colour Contrast Ratio Analyser and The Paciello Group’s Contrast Analyser.

    Don’t hit the Red button

    When writing your copy, it’s important to understand that not everybody will see the page the way you do. If you are directing someone to a link, you can’t assume that they will be able to find the “red button” if they can’t see colour. It’s best to either direct them to the button immediately after your text (EG - the button below), or a better way would be to be specific about what the button says. (EG - the button/link labelled “click here for online shop”).

    Link text must make sense when taken out of context

    This particular requirement has been questioned here by Joe Clark and he makes a good case. However it is currently a requirement by the Web Accessibility Initiative (WAI) and therefore needs to be meet to satisfy the Web Content Accessibility Guidelines (WCAG), including the current version: WCAG 1.0, (checkpoint 13.1) and the soon to take over working draft: WCAG 2.0, (checkpoint 2.4.9).

    The point these guidelines are raising is that people using assistive software such as Screen Readers have the power to draw up a list of all links on a page. Therefore, if you have 10 links that all say “Click here”, the user won’t be able to distinguish between the links as to where they are going. It’s important to be descriptive in each link, so “read more about Accessibility” for example.

    Coming in Part 2: Flash, PDF, Word Docs.

    Further reading

    RNIB web access centre, Design and Build checkpoints
    Web Accessibility Initiative (WAI), Accessibility checklist

    Tags: , , , ,

    Leave a Reply

Blog links