Learning By Mistakes - The ALT Attribute
Posted on Wednesday, October 4th, 2006
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
1October 4th, 2006 at 8:57 am
Richard Morton Says:Where does it say that a table based layout is an automatic failure of WCAG 1.0 guideline 3?
Take a look at guideline 5.3 which says “Do not use tables for layout unless the table makes sense when linearized…”, which specifically allows layout tables provided that they make sense when linearized.
2October 4th, 2006 at 6:54 pm
Hans Says:Nice digging Phil. I think tables should just be used for tabular information, nothing else. Stylesheet for laying out things is the way to accessibility. That’s the way if we want a better web.
Wow, you’ve really digged for everyone in above. Nice points.
3October 4th, 2006 at 10:05 pm
Phil Says:Richard: Thanks for posting, sorry I didn’t make things clearer. This is my interpretation of the guidelines.
From the WCAG 1.0 guidelines:
Using a table to control layout is directly against this section of guideline 3. You do make a good point by citing guideline 5.3, however I would like to draw your attention to the note below the guideline:
Bearing in mind that this recommendation was written in 1999 and that user agents certainly have moved on with respect to CSS layouts I think it is safe to say that the guidelines recommend you do not use tables for layout.
Your point is valid though and a linearized table is perfectly accessible. Thanks for pointing that out, I guess my interpretation was a little heavy-handed. I will update the article now.
Hans: Thanks very much. Tables are for tabular data. I think the W3C sum this up in the introduction to tables in the HTML 4.01 specification as follows:
You make an excellent point there as well, the only way to a better web is laying out things with CSS!