Using images in content

Only use an image if it helps people understand the content or service. Before using an image, read Before you use images in web content.

Make sure everyone, including people using screen readers, can access information in complex images.

On this page

• Quick checklist: is a complex image needed?
• What complex images are
• Make complex images accessible
• Maps
• Charts and graphs
• Diagrams
• Key points to remember

Quick checklist: is a complex image needed?

Use a complex image when information is too detailed to explain clearly in short alt text.

Ask yourself first:

Would people understand this content without the image?

If the answer is no, use a complex image only if all of these are true:

• People need the image to understand the content.
• The image contains lots of detail, relationships or data that would be difficult to follow in text alone.
• All essential information can be explained in nearby page text or another accessible format.
• You can add short alt text (a short description read by screen readers) to identify the image.

If you are unsure, using text instead is usually the safest option.

What complex images are

A complex image is an informative image where the content is too detailed to explain clearly in short alt text.

Unlike simpler informative images, complex images contain multiple pieces of information or relationships that need a longer explanation. This is why they are described using nearby page text instead of alt text alone.

For general guidance when to use informative images, read Using informative images.

Examples of complex images include:

• maps showing multiple locations or geographic areas
• charts and graphs, including flow charts and organisational charts
• diagrams and illustrations that the page text relies on

If you are unsure whether an image is complex, explain the information in text first. You can always add an image later if it helps.

Make complex images accessible

Complex images must be both:

• visually clear and easy to understand
• fully explained in accessible text

This means thinking about both how the image looks and how the information in the image is provided in text.

Complex images should be treated as one image, not as separate parts.

Do not add alt text to individual shapes, arrows, icons or components inside a complex image. Screen readers will read these out of context and make the content harder to understand.

Explain the meaning of the whole image in nearby page text, not individual visual parts. For example, use it to explain trends, relationships, steps or data shown in the image.

Use alt text to identify the image if it adds meaning or context, and use nearby page text to provide the detail, either above or below the image.

For guidance on writing effective alt text, read Writing good alt text.

Why complex images need extra explanation

Complex images contain too much information to describe using alt text alone. Nearby page text is needed so people can understand the content or complete their task, for example, if the image failed to load.

This applies to images in all digital content formats that may appear on our websites, including web pages, Word documents and PDFs.

Example: a line chart showing library visits over time

Maps

Maps show geographic areas or locations. They can be navigational (helping people get somewhere) or reference (showing areas or features).

If someone could not see the map, the same information must still be available in text. This usually means writing directions or descriptions as normal paragraphs.

Treat the map as one image. Do not add alt text to individual labels, markers, or routes.

Keep maps simple, clear and focused. Extra detail makes them harder to explain and use.

Navigational maps

Navigational maps help people find a location or understand routes, access or diversions.

What to check

• Routes, addresses, or key locations are clear.
• Landmarks are included only if they help navigation.
• The map is simple and focused.

• Explain all directions and locations in nearby page text.
• Leave alt text empty (treat as decorative) only if the map adds no additional information beyond the text.
• If the nearby page text refers to the map or expects users to use it, add short alt text to identify the map.
• Avoid adding decorative detail that does not help navigation.

Reference maps

Reference maps show geographic features or areas of interest, not directions.

There are two types:

• Complex reference maps – show lots of information and need nearby page text.
• Simple reference maps – can be explained with alt text alone.

How to make reference maps accessible

First, explain clearly what the map shows (for example, a planned development or survey area).

Then decide how to describe it:

• For complex maps, explain all key features in nearby page text and add short alt text to identify the map.
• For simple maps, add alt text summarising the map in 1 to 2 sentences.

Example: a simple reference map

Charts and graphs

Charts and graphs show structured data.

Use them only when text alone would be hard to follow.

Treat the chart or graph as one image. Do not add alt text to individual bars, lines, or data points.

How to create a good chart or graph

• Make it clear, uncluttered and easy to understand.
• Use one main message or comparison.
• Add a clear title explaining what the chart shows.
• Make sure all labels, axes, and legends are readable.
• Use labels, markers or patterns as well as colour.
• Have good contrast between chart elements.
• No unnecessary decoration or visual effects.

How to make charts and graphs accessible

Explain all the data and trends in nearby page text. Then add short alt text that identifies the chart and indicates the data is explained in the nearby page text.

Make sure the visual design is accessible:

• Ensure colours used for important information, such as data points and trend lines, meet contrast requirements (minimum 3:1, ideally 4.5:1).
• Do not rely on colour alone. Use labels, markers or patterns to show meaning.

Diagrams

Diagrams show processes, steps, structures or layouts.

Use a diagram only if it helps explain something that would be harder to follow in text.

Treat the diagram as one image. Do not add alt text to individual boxes, arrows or shapes.

How to make a good diagram

• Clear and easy to understand
• Obvious starting point
• Reading order: left to right, top to bottom
• Simple shapes with minimal text and annotations
• Uses text or patterns to convey meaning if colour is used
• Avoids overlapping lines or arrows

How to make diagrams accessible

Explain the full process or structure in nearby page text. For example, if the diagram shows steps, provide the same steps in text.

Then decide how to treat the image:

• If the diagram adds no additional information, leave the alt text empty (treat it as decorative).
• If the diagram supports understanding or adds context, provide short alt text to identify it.

Alternatives to diagrams

Sometimes text is better than a diagram.

Structured text with headings and bullet points often works better because it:

• is accessible to more users
• is easier to update
• allows text zooming and resizing
• works better on mobile devices