Effective Alt Text

Good alt text can be a useful tool for enhancing the web interface. It provides supporting information, helping users gain an understanding of the structure web pages and an insight into the behaviour of key controls and interactive elements.

"ALT" is a HTML tag. It adds a short line of text to an image, usually for descriptive purposes. If you are using a mouse and you "hover" the pointer over an image on a web page, you will notice that a short line of text appears - this is the alt text. You should also see the alt text if you switch off the images on your browser - the images have been replaced by "placeholders" and the same short line of text which appeared when you hovered the mouse over the image.

Alt text is an important element in the web interface for the following reasons.

• People with slow connections browse with their images switched off.
• It improves accessibility for people who use screen readers. Screen readers will read aloud the alt text, which helps the user to build a picture of the content and purpose of visual imagery.
• It's part of the information on your web page. Indexing "robots" trawl through the web, reading the text content of pages to determine the most appropriate category for search engine placement. These robots can't "see" images and use the alt text to help index the pages correctly.
• It can provide contextual help, supporting information or prompts and hints to guide the user through a task.

It's obvious that alt text is an important detail, but the fact that each image has associated text is not enough to ensure good usability. Effective alt text requires understanding of how people use your web pages, and providing them with carefully written text which is appropriate to their needs.

Good alt text practice

Most importantly of all, ensure that all alt text is appropriate and helpful. It is perfectly possible to diligently apply alt text to every image on a site and create a result that is completely useless . Unless the alt text effectively conveys the information the image displays, it will be ineffective.

Some images are purely decorative, such as blank spacer gifs or stylised bullet points, and do not require alt text because they don't provide any significant information. In this case you should use the "null" value, or in other words ALT="". Doing so will ensure that a screen reader will simply ignore the image, meaning the user does not have to listen to the useless description "image" - which is what a screen reader might say if the ALT attribute is not included. This is preferable to labelling every decorative image with a name. You have to ask yourself if people visiting your site will prefer appropriate silences, or to have to endure hearing "bullet", "bullet", "bullet"...

Supplemental images may not be crucial to understanding the content of the main body of text but certainly help to enhance the user's appreciation. For example, a photograph of the CEO may add a human feel to a "Terms of Use" page, which could otherwise come across as being corporate legalise. In this case, the alt text can simply say "Photo of Mr Bloggs, our CEO", or "A message from our CEO". If Mr Bloggs is your boss, he is more likely to appreciate this kind of label to "PhotoJK23.JPEG", which does not mean very much unless you are a computer.

Supporting or illustrative images which are part of the content, such as a product image on an eCommerce site, may require descriptive alt text which should go beyond simply stating the name of the product - it must also help to sell it. Which sounds more enticing, "Phone Thumbnail" or "Unbeatable Brand X Mobile Phone Deal"?

If images are used as navigation links, alt text can provide an indication of what lies behind the link. Because alt text provides the opportunity to use longer text strings than what might be possible within the constraints of a graphic layout, it can provide supplementary information, clues about what will happen a link is followed or even just some encouragement to go ahead and follow the link. For example the Alt text for a graphic which says "newsletter" could say "Get updates on special offers".

This characteristic can be exploited where an image link points to the same destination as an associated text link. Rather than repeating the content of the text link, which can create unnecessary clutter, you can either add more information, or insert a null value (ALT = ""). The latter technique especially improves task efficiency and the overall user experience for people who use screen readers. Otherwise, the user will hear "newsletter", "image newsletter" and so on.

Usability of images which act as buttons and controls can improved by using Alt text to provide contextual help, supporting information or prompts and hints to guide the user through a task. Adding alt text which says "Click Here", to a button is not a hint and it's not a useful instruction if the user is working with a laptop without a mouse.

Alt text has it limits and for complex images such as graphs & charts it may be more appropriate to use another technique to provide a longer description. In the case of a graph which presents complex information in a visual format, it may be preferable to use the LONDESC attribute or a link to another page, to provide the same information in text format.

This is just an outline of what can be achieved with Alt text. Whichever technique you choose to use, the key is to understand how people use your web pages and provide them with a carefully considered solution which is appropriate to their needs.