Writing good ALT text

Contributed by Simon Willison

One of the first things anyone learns about accessible web design is the importance of the alt attribute on images. If you are using XHTML, image tags without alt attributes won't even validate, so ensuring this information is provided becomes even more important. Writing alt text is easy, but writing it well enough for it to be a help rather than a hindrance can take some thought.

ALT means ALTernative

The alt attribute is meant as an alternative to the image; if the image is displayed, the alt attribute should not be (unfortunately Internet Explorer gets this wrong by displaying alt attributes as a tooltip, a function better served by the title attribute). When writing alt text, it is important to ask yourself what information the image is conveying.

For decorative images, leave it blank

Most sites contain a large number of images which are there for purely decorative purposes: things like spacer gifs, images forming the corner of a pretty drop shadow effect, floral patterns attached to item headers. All of these should have their alt attributes left empty. They add no extra information to the content, so as far as a screen reader or text browser is concerned they do not exist.

If an image contains text, replicate the text in full

Images containing text are frequently used when a non-standard typeface is required by a site design. There is absolutely nothing wrong with this technique from an accessibility point of view, provided the alt text exactly replicates the text on the image. There are no exceptions to this rule: if an image contains text, the alt text must be the same. This is particularly important when images are used for navigation elements that also act as links.

For charts and graphs, try to summarise the trend

Charts and graphs are one of the harder image types to make accessible. The phrase "a picture speaks a thousand words" definitely applies here. Often though, a chart will be being used to highlight a specific trend. The alt text can therefore be used to summarise that trend, for example "unemployment rates rose from 5% in January to 7% in March". The longdesc attribute may become useful here (more on that below).

For custom bullets, use CSS

If an image is being used as a custom bullet point for a list, consider using CSS instead. CSS provides an easy way of replacing the bullet points in an HTML list with a custom image, and doing so will reduce the size of your markup while making things more accessible as well. If for some reason this is not an option (you need to serve up a pixel-perfect design to users of outdated browsers such as Netscape 4) then it is acceptable to use a single asterisk instead: this will at least serve text browsers such as Lynx

For everything else, be imaginative!

The above advice covers the most common easy cases; for images that are there for a purpose and are not covered above you really need to use your imagination. What information is the image conveying? For example, a photograph of your Uncle may be served by "My Uncle, standing in our living room, holding our black and white cat". Writing suitable alt attributes for photographs is particularly difficult. There are no hard and fast guidelines, so it is up to you to make the best of a tricky situation.

Test in Lynx

The Lynx text only browser is a great tool for testing whether or not your alt attributes are effective. It can be downloaded from the Lynx site, but there is also an online tool which emulates your site as displayed by Lynx without the need to install any additional software.

The longdesc attribute

Less well known than the alt attribute is the longdesc attribute, an optional extra for the image tag which can be used to point to the URL of a full description of an image. Support for longdesc in modern user agents is almost non-existent, but that may well change in the future. Depending on the information conveyed by an image, you may be well served to write up a separate long description and link to it using this attribute. One clever technique (demonstrated by Mark Pilgrim in his 100 series) is to include the description on a page below a photgraph, and use the longdesc attribute to link to that part of the page using a fragment identifier.

Further Reading

• Joe Clark writes extensively about making images more accessible in his book, "Building Accessible Websites".
• Ian Hickson has an extensive essay on picking the correct alt attribute.
• Dive Into Accessibility covers alt text usage.

Comments

Comments are not available at the moment due to spam problems.