Skip to Main Content
You are in the main content


Writing Good Alt-Text

The Guild of Accessible Web Designers (GAWD) provides notable guidance on how to write good alt-text. This article outlines steps web designers can take to implement effective alt-text.

One of the first things anyone learns about accessible web design is the importance of the alt attribute on images. 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 summarize 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 summarize 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.

courtesy of: gawds.org.