Using images in content

Make sure everyone can access information in complex images. If someone cannot see the image, they must still understand everything it shows.

Only use complex images when they help people understand the content or service. Read Before you use images in web content.

On this page

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

Quick checklist: is a complex image needed?

Ask yourself first:

Would people understand this content without the image?

If yes, use text only.

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

• The image is essential to understanding the content.
• The image contains detail, relationships or data that are difficult to follow in text alone
• All essential information is explained in nearby page text or another accessible format, such as a table or link to data
• You can use short alt text to identify the image.

For example, a chart can help people see trends quickly, but the trends still need to be explained in the page text or provided in a format people can easily access.

What complex images are

Complex images contain multiple pieces of information or relationships.

Examples 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 add an image later if it helps.

For general guidance, read Using informative images.

Make complex images accessible

Complex images must be both:

• visually clear and easy to understand
• fully explained in accessible text or another usable format

Treat a complex image as one image, not separate parts.

Put the most important information in the page text. Start with a short summary of the key message, then give access to the full detail.

For more on writing alt text, read Writing good alt text.

Do not rely on the image alone. Someone should be able to understand the content without it.

Why complex images need extra explanation

Not everyone can see, understand or interpret information in a complex image.

Screen readers read the alt text for an image out loud. If the description is long, it can be hard to follow and people may lose track before it finishes.

For detailed information, page text is usually clearer and easier to use. The content should make sense without needing the image.

This helps people who cannot see the image. It also helps those who can see it but find it difficult to interpret, especially when it contains a lot of detail or is viewed on small screens.

This applies to images on web pages, and in Word documents and PDFs.

Example: a line chart showing library visits over time

Maps

Maps show geographic areas or locations.

If someone cannot see the map, the same information must be available in text.

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

Keep maps simple 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 only if the map adds no additional information beyond the text.
• If the page refers to the map or expects users to use it, add short alt text.
• 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

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

Then:

• For complex maps, explain all key features in nearby page text and add short alt text
• 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 them as one image. Do not add alt text to individual elements.

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.
• Provide the same data in a structured format, such as an accessible table or link to raw data.
• Then add short alt text that identifies the chart. The explanation should not rely on the chart.

Also, make sure the visual design is accessible:

• Use sufficient colour contrast
• Do not rely on colour alone
• Use labels, markers or patterns to show meaning

Someone should be able to understand the data without seeing the chart.

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 parts.

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.

Make sure the steps or information can be fully understood from the text alone.

Then decide how to treat the image:

• If the diagram adds no additional information, leave the alt text empty
• If it supports understanding, provide short alt text

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