Alt texts for web images, and accessibility

On this page: One of the simplest ways you can improve the accessibility of your pages is to add alternative text for your content images. Lois summarises why and how.

Any decent book or article on web design will tell you that it is good practice to include alternative (alt) text for your graphics. For example, the XHTML code might look like this:

<img src="/images/i4i-map.gif" width="35" height="40" alt="go to i4i home">

Yet it is surprising how many sites developed by so-called experts fail to do this, even though most reputable HTML editors make it very easy.

Who needs alt texts anyway?

screen shot of home page with many images without alt texts; therefore almost content-free

Above right, you see a screen shot of the home page of one of the UK's larger software consultancies, who did website design amongst other things (taken August 2001). I turned images off in the browser before I loaded the page. Not one of the 40+ images (highlighted in pale yellow) has an alt text, and without being able to see the URL in the address bar, there is no way to tell whose page it is. Of course, they may not care if anyone without 20/20 vision or a high-speed connection cannot see their site properly, but I hope this is due to ignorance rather than arrogance.

What about content-free images?

The W3C's link to external site Web Accessibility Initiative has proposed guidelines for accessible web pages. They state that content-free images (like spacers and indescribable "eye-candy" etc.) should be given an empty alt attribute (alt="").

In contrast, the link to external site RNIB recommended the use of an asterisk (alt="*"). August 2001: I received some clarification of this from RNIB's Donna Smillie. Some older screen readers fail to interpret an empty alt properly, and the asterisk is to help blind users of these programs. However, Donna tells me that the RNIB does not deprecate the use of empty alts by sites that wish to conform to the WAI standards, and may eventually reconsider its advice as the use of the offending programs declines. So there you have it.

Making content even more accessible

Quite often, an alt text that says "company logo" may not be enough. In this case, you can provide a longer description. The current HTML standard provides a longdesc attribute for just this purpose, but it isn't supported by most user agents at present. So, the current convention is to put a link next to the image to a page of description - but don't forget to add a title explaining what it does.