Learning By Mistakes - The ALT Attribute

Thanks to Roger Johansson’s post on false accessibility claims on public sector websites I came across Bruce Lawson and Dan Champion’s campaign to find out what went wrong in the recent £200,000 redesign of the DTI website. The short story is that after redesigning, the DTI displayed a message on the accessibility area of their site, claiming to conform to AA-level standard of the WCAG 1.0. Bruce and Dan’s problem was that it didn’t, quite, quite obviously.

What’s This About Alt Attributes Then?

I only just found out about this awful use of taxpayers money, especially as I am about to start paying taxes myself, I decided to have a look at the DTI website to see what was wrong. To start with, I noted a table based, tag soup layout (a automatic failure of WCAG 1.0 guidelines 3.3 [use CSS for layout] and 5.3 [Do not use tables for layout]) and 69 errors (on the front page) when run through the W3C’s validator. Then I disabled images and almost fell off my chair.

What Happens When Images Are Disabled?

On a graphical browser, if images are disabled, then to explain what the image was supposed to be is the alt attribute. The W3C specification notes that you have to set alt text for img elements.

The combination of a table based layout and poor understanding of the specification by the designers of the DTI site resulted in the following:

Pretty Stars

Yes, the designers have given all the spacer gifs the alt attribute of *. Now, this isn’t a huge problem on graphical browsers, not all that many people browse the web with images turned off. However, the DTI did pride themselves on the accessibility of the site. So we turn our attention to other borwsers, in this case, screen readers.

To get an idea of what a screen reader will read to a visually impaired user, I use YellowPipe’s Lynx Viewer. Here is an extract of the DTI page:

*
   *
   *
   DTI HQ, 1 Victoria Street, London * *
   *                                   *
   * * [19]Printer Friendly Version *
   Welcome to the Department of Trade &
   Industry Website

   Working  to create the conditions for business
   success and help the UK
   respond to the challenge of globalisation.
   *
   *
   *

Asterisks Everywhere

According to Vision Australia, if you were using Window-Eyes, this wouldn’t bother you. However, if your screen reader of choice happened to be the most popular, JAWS then it would read “star” everytime it met an asterisk. That is six times in a row at one stage!

The Lesson

Firstly, don’t use spacer gifs, use style sheets to affect the margins, padding and layout of your page.

Next, if you have to use spacer gifs (and you don’t) leave their alt attribute null like this: alt="". That way nothing appears when images are off or your user is using a screen reader. Simple.

If you enjoyed this post, why not subscribe to Unintentionally Blank

Posted in Accessibility, Web Standards | Comments are closed