Using images in web content

Using informative images

Make sure information in an image can be easily seen and it has a text description for those who cannot see it.

What informative images are

Informative images are meaningful images. They include information that support nearby text and help people better understand your message.

An image is informative if people cannot understand your information well without it.

Examples can include:

editorial photographs in news articles
maps, graphs, charts and diagrams
other photos, illustrations or graphics referenced by or relevant to the text

For example, a visual instruction like how to open a fire door or a picture of Robin Hood showing the correct way to hold a bow and arrow.

When using informative images, make sure you:

use them only if there's a real user need
check information in them has good colour contrast
check they zoom up to 400% without meaning being lost
add a text description that explains any critical information in them

Using colour

Make sure colours used for information in images have a good colour contrast ratio. Colour contrast ratio is the difference in brightness between two colours.

Non-text content like images must have a minimum colour contrast ratio of 3:1.

The most inclusive and easiest to read colours for non-text content have a minimum contrast ratio of 4.5:1.

For example, a line chart must have good contrast between the:

text labels and background colours
lines and background colours
lines next to each other

Decorative images or text in brand logos do not need accessible colour contrast.

Do not use colour alone to show meaning. For example, you may need to add text labels or different patterns to bars in a chart, even if it has an accessible contrast ratio.

Read more about colour contrast in How to write accessible content: Readability

Learn how to check contrast ratios in different formats:

Image quality

Make sure images are good quality, so they remain clear and easy to use when a user zooms in up to 400%.

This helps people using screen magnifiers or who need to zoom in on your image on smaller screens, like a mobile phone.

To test image quality on a web page or in a Word document, hold down 'CTRL' key and the plus (+) or minus (-) keys on your keyboard to zoom in or out.

Add a text description for an image

Informative images must have a text description to be accessible. You can provide a text description by:

adding alternative (alt) text to an image
including image information in the nearby text (this helps all users)

Sometimes you may need to do both.

Adding alt text to a image

Alt text is a short description of an image that helps people using screen readers understand what an image shows. It also can appear if the image doesn't load.

You must decide:

if your image needs alt text
what your image means (not what it looks like) in relation to nearby content
if alt text can be described in 1 or 2 sentences (150 characters)

Do not rely on auto or AI generated alt text - it's usually wrong.

Features of good alt text

No longer than 1 to 2 sentences (or 150 characters)
Describes key reason you chose the image to support nearby text (not what it looks like).
Says what type of image it is, like a map, graph, photo or screenshot.
Uses its name if it has one, like 'Figure 1'.
Does not start with 'Image of' - users will already know it's an image.
Does not repeat all the information already explained in nearby text

Guidance on text descriptions and alt text

Including image information in nearby text

If your image's text description is longer than about 1 or 2 sentences (150 characters), you should:

describe the information nearby, either directly above or below the image
leave the alt text empty if the nearby text explains the image fully
use the alt text to briefly explain the image and where the long description is if the nearby text refers to the image or misses critical information

A text description does not have to be a paragraph. You can use headings and bullet points. Simple data points can also be shown as an accessible table.

Add a caption (if available)

An image caption is a short piece of visual text that usually shows beneath a graphic. Captions can help everyone better understand why you chose an image for your content.

Do not add captions (or alt text) to images that are purely decorative.

Captions and alt text should both support the image’s purpose for being there. Use alt text to convey the same critical information if the image didn't load. Use the caption to better convey why you chose the image to support the content (this helps everyone).

Don’t repeat all the information provided by the caption in the alt text, though sometimes they can overlap. Otherwise, screen reader will hear the same information read out twice.

For example, suppose you have a web page which discusses the history of Rufford Abbey Country Park in Nottinghamshire. You include a photograph of the abbey in a section about its history as a monastery. The caption adds context to the image in relation to the nearby text. You use the alt text to briefly describe what's missing from the caption, but still obvious to someone who can see it.

Caption: 'Rufford Abbey ruins were once a 12th Century monastery.'

Alt text: 'Photograph of Rufford Abbey ruins on a sunny day'

Redundant images

Redundant images are informative images that give visual learners a different way to access the same information presented in text.

Having a redundant image can sometimes help those who benefit from the visual explanation.

Redundant images can be treated as 'decorative' for accessibility purposes because removing them does not remove any meaning from the page. This means they should not have a caption or alt text added.

For example,

Text on a web page reads: 'Water fire extinguishers are red and are used for Class A fires involving materials like wood, paper, and textiles. They are typically located near exits and fire alarm call points.'

Nearby image: Photo of a red water fire extinguisher labelled for Class A fires.

Image alt text: leave alt text empty (marks 'decorative')

Do not add redundant images to content unless they are truly needed.

Depending on how they are used in content complex images like maps, graphs, charts and diagrams will sometimes be treated as redundant images.