Accessibility for low vision users

Using web standards, many web designers have become a lot better at ensuring their sites are readable by speech browsers but what about the much larger audience that have some limited vision.


Feeling smug about accessibility

As I continue to work on the redesign of the Headscape website, it would be easy for me to become rather complacent about accessibility. After all, I have separated content from design ensuring the site degrades nicely on older browsers and works well for most speech browsers. I have even ensured all my XHTML is valid and the code passes a bobby check. What more could be asked of me?

The trouble with accessibility

The trouble is accessibility is about more than fulfilling a series of checkpoints or building to a certain set of standards. Sometimes things are more complex than that and sometimes there are no clear answers at all.

Low vision users

Take for example low vision users. Unlike speech browser users it is not enough to create clean code which their browsers can easily read (although even that has a whole bunch of issues I will not bore you with here). Low vision users have a number of requirements that need to be specifically catered for. For example:

  • They require a simplified interface free of anything but the most essential navigational elements.
  • They need a single column layout as content can be pushed off screen at large font size.
  • It is imperative the user can scale the font to any size without the design breaking.

So what are the options?

Remove the site sheet

The quickest and easiest option would be to allow the user to strip out all the styling of the site and see the raw content. It would not look very pretty but at least they would be able to scales it or even change the colours using their browser settings.

The downside of this approach is that this goes no way to meeting the first of our three criteria listed above because it just shows everything to the user.

Make the site scalable

Another option is to make the site scalable. This means that the interface adapts to compensate for increases in font size. However even the best scalable site is going to be hard pushed to accommodate some of the font sizes visually impaired users require. One option is to make the site elastic which means the whole interface magnifies with the text. The downside of this approach is that it can push elements off screen and as a result low vision users often fail to see them.

Of course using a single design approach to fit all also has an impact on the visual styling of the site as well as the usability. For example, a user who does not have a visual impairment is going to find a single column design frustrating and unattractive. It smacks of designing for the lowest common denominator where nobody wins.

Alternative stylesheet

The third option and my current favourite, is to create an alternative stylesheet for visually impaired users. Because we have separated content from design, it is easy to create a new style that can accommodate all of a visually impaired users requirements without compromising the standard design.

In some ways this feels like going full circle back to the days were we used an alternative accessible version. This approach was generally frowned upon especially by organisations such as the RNIB because these accessible sites often had less content and were poorly maintained. There was a feeling that disabled users were being treated as second class citizens.

The zoom layout is not like a ghettoized text-only page. It remains as fresh and updated as the regular page because the content is the same. All that has changed is the style sheet.

I tried to speak to the RNIB about this issue, but unfortunately despite assurances they would respond, have heard nothing. However, I then discussed it with Robin Christopherson at AbilityNet who specialise in assistive technology and he agreed that alternative stylesheets was the best option currently available:

If done properly they can radically alter the experience for different groups. This is quite different from ‘ghetoising’ groups by offering them an alternative site with, in most cases, less content or functionality (your ‘Text only’ link). It’s this that we and the RNIB object to.

The problems

Unfortunately, at the moment even this approach is not without its problem. The biggest and most obvious of which is the fact that when a user arrives at your site they have to first find the accessible version. This can be incredibly challenging and there is no simple solution. Obviously, a prominent link will help but at the sizes some visually impaired users would require this will totally dominate the design.

I am currently working on a JavaScript approach that would detect the font sizes specified in the users browser and change style if they are not the default setting. Of course not every person who happens not to be using the default settings are visually impaired and anyway there are significant browser compatibility issues to overcome.

The ideal world

In an ideal world there would be a way of telling the browser that a zoomed version is available. The user could then configure the browser to use this alternative version if it is found. Although there is some talk about making this happen it is still a long way from being a reality. In the meantime we might have to accept there is no ideal solution and endeavour to find a happy medium that provides the best possible to all users.

So what’s your approach?

So how does your site cater for low vision users? Do you do anything at all? I would love to hear how other people tackle the issue.

Further reading

If you want to know more about creating alternative low vision versions of your site I would highly recommend these two pages:

Zoom the web – presentation from the @media 2005 conference

Big, Stark & Chunky

 

  • Carl Grint

    My approach normally is to use Alterative Stylesheets to provide a range of options for the Visually Impaired.
    I provide a Large Text version and a Yellow Text on Black background style sheet and a Black Text on Yellow background stylesheet to improve the contrast between text and background.
    I use a simple ASP coding to provide the option to set each Stylesheet as the default using a Cookie (no Javascript) so that the site remembers the visitors choice the next time and throughout the site.
    I still find the way Browsers provide Alterative Stylesheets a bit hit and miss, so although I do add each stylesheet in as an Alterative, I do think more people use the Links I provide on the Home and Help pages to chose these Alt stylesheets rather then using the browser itself.

Headscape

Boagworld