Images and alt text

Choose relevant and clear images 

Use words rather than images. Only use images that usefully add to the text content.

Make sure the images are not culturally insensitive to any audience. 

Make sure there is sufficient contrast between text and background in images. 

All images need alt text 

Images must have alternative text (or alt text) to describe the information or function of the image.

Alt text appears to the user when: 

• images are disabled or fail to load 
• screen reader or text-to-speech software is used 

If you include images you must create alt text.

Different image types have different alt text requirements. You can use an alt text decision tree to help you work out what kind of alt text you need. 

Captions 

Add ‘Caption: description of the image…’ below the image. 

Don’t use the same text in the caption and alt text. Otherwise a person listening to the page hears the same information twice.

If the caption clearly explains the image make the alt text blank (alt="").

In HTML5 use the <figcaption> tag in the <figure> element.

Informative images 

Informative images convey a simple concept or information that can be expressed in a short phrase or sentence. 

An informative image needs: 

• Text near the image that references it 
• short alt text that briefly describes the content (different from the caption)

Diagrams, graphs, charts and other complex images 

These features have the following requirements: 

Complex images 

• Text near the image that explains why it is there and what it shows or highlights 
• short alt text that briefly describes the content (different from the caption)
• Text link to a page with a long text description (and possibly the associated data) 

Graphs need dots, dashes and patterns, in addition to colour, to show the difference between data. 

Long text description

Long text description is a full description of a complex image or the table of data used to generate a graph or chart.

Long text helps people who don’t understand graphs or diagrams as well as those who can’t see them.

To write long text imagine you’re describing the essential elements of a complex image in a radio interview or over the phone. Explain the important aspects, not necessarily the detail. 

• Also see W3C’s complex images tutorial. 

Decorative images 

If an image is just decoration you should use a null (empty) alt text: alt="" (don’t add a space between the quotation marks).

A common way of including decorative images is to add them using the CSS rather than the HTML code.

Never include an informative image with CSS as alt text cannot be applied to it.