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:

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

Anyone with a visual impairment who needs a text explanation of an image or logo in your page, because either it is not clear to them, or they cannot see at all.
The wrong choice of colours, or an ornate script, or tiny text, can all hide important content from some of your visitors without a text version to decode it.
Anyone with a PDA who'd rather read text than see tiny images.
Anyone fed up with the world wide wait who turns off images to save page loading time, or with a slow connection, so they can decide if a treacle-slow all-graphic home page is worth waiting for. If you use alt texts, they have something to read while they wait.
You may imagine that, for example, everyone in the USA has high-speed internet access. But from conversations in online discussions, I can tell you that this isn't true. Just as in the UK, more rural and depopulated areas of the States do not, and will perhaps not for years, have access to cable, satellite or broadband; like many of us, they rely on a dial-up connection.
Those few diehards still using text browsers like Lynx who can't see any images at all.

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 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 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.