Writing effective ALT text

What is ALT text?

When you add an image into a web page you have the option of adding alternative (ALT) text (See Adding Images for instructions). The purpose of ALT text is to provide an alternative way of conveying the information provided by an image to website users that can't necessarily see the image. ALT text is hidden to most website visitors.

You can occasionally see the ALT text that you apply to an image in two scenarios:

1. When you add an image to a Plone page but forget to publish the image. In this scenario the image won’t display to non-logged in users but they’ll see the associated ALT text. 

Example of ALT text on an unpublished image

If you ever encounter this problem you need to publish the image.

2. When you hover your mouse cursor over an image. Users of the internet explorer web browser will see the ALT text in a hover caption (sometimes referred to as a ‘Tool Tip’).

Example of a hover caption

Why is ALT text important?

Adding ALT text to images is an important part of making your web pages accessible to both the visually impaired, who use assistive devices such as screen readers, and users that use non-graphical web browsers. In both cases, the user will obviously not be able to view the image. Instead their web browsing device will read/display the ALT text that is associated with the image. This is especially important if the image conveys information that is required for the user to fully understand the information on the web page.

Writing good ALT text

In some cases, providing poorly written ALT text can be as bad as not providing ALT text at all. Poorly written, ambiguous, or irrelevant ALT text can actually worsen understanding of a page and cause confusion.

Determining appropriate ALT text is often a matter of personal interpretation and is influenced by the context of the image (i.e. the accompanying text). However, following the guidelines below will help you to create effective alternate text for most situations.

ALT text should typically:

  • Be accurate and equivalent in presenting the same content and function as presented by the image.
  • Be succinct. This means the correct content and function of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • NOT be redundant or provide the exact same information as text within the context of the image.
  • NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It’s usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user knows that it is an image that is conveying the content, as opposed to text.

The information in the bulleted list above is taken from WebAIM (April 2010).

ALT text  example - good and bad

The following image is taken from a hypothetical web page about new developments to the engineering building. The picture is of a postgraduate engineering student working in the new electron microscope lab. Therefore, if these details are important, the ALT text should reflect this. Using the ALT text of ‘Picture of a student’ will not convey the content/purpose of the image effectively.

Good and bad alt text examples

When is ALT text not needed?

It is not always necessary or appropriate to add ALT text to images, such as in the following situations:

  • If an image is purely decorative and provides no useful information to the user to aid them in understanding the content of the web page.
  • If the information provided by the image is communicated effectively elsewhere in the body text of the page. Often images (or diagrams) are used to reinforce understanding and do not necessarily provide any additional information. Providing ALT text in this situation would duplicate text content.