Images and alt text

Design your product or service so everyone can use it.

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 needs to convey the meaning and purpose of the content, not just a description. Be descriptive and ensure you cover what the image is trying to communicate to the user. If there is text in the image that cannot be read by a screen reader, ensure this is included in the alt text.

Alt text appears to the user when:

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

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.

For more information visit 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.