Using images in web content

Using complex images

Make complex images like maps, graphs, charts and diagrams accessible, so no one misses out on the important information they show.

What complex images are

Complex images contain substantial information – more than can be explained in a short phrase or sentence.

Examples include:

graphs and charts
diagrams and illustrations where the page text relies on the user being able to understand the image
maps showing locations or other information

Make a complex image accessible

Complex images need a text descriptions so people who can't see an image can still understand it.

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.

Different complex images

Complex images can include more information than can be explained in a short alt text phrase or sentence.

Examples include:

maps showing multiple locations or other route information
graphs and charts, including flow charts and organizational charts
diagrams and illustrations where the page text relies on the user being able to understand the image

Maps

A map is a drawing or graphic that shows a location or geographic area, like:

a specific road, town or area of the county
survey areas and planned developments
the layout of a room or rooms in a specific building

Drawings, graphics or diagrams that don't relate to a specific location or geographic area are not maps.

Maps for navigational use

Maps intended for navigational use help people work out how to get to a location or show critical information like road diversions.

They must have a clear text description like an address or route included in the text.

If a map is for navigational use:

provide a text description for it in the document text, either directly above or below the image
leave the alt text field empty - unless the text refers to the map, then add brief alt text explaining what it shows

A text description must include all the navigational information the map shows, like an address or route description.

Do not include any information that wouldn't help someone navigate, like visual colours or icons.

A text description doesn't have to be a paragraph. It can use headings and bullet points. Simple data can be shown as an accessible table.

For example:

Text on page: 'The Newark Town Hall is located at Market Place, Newark-on-Trent, NG24 1DU. It is accessible via the A46 and is a 5-minute walk from Newark Castle railway station. Parking is available at the nearby London Road car park.'

What nearby image shows: Google Map showing Newark Town Hall, nearby roads, train station and car park.

Image alt text: leave empty, or if the nearby text refers to the map, 'Google Map of Newark Town Hall, train station and car park.

Maps not for navigational use

Maps not for navigational use do not need a text description but must have alt text added.

Examples of maps not meant for navigational use are maps showing:

planned developments like buildings, roads or other types of infrastructure that show where the development will be and its parts
specific features in a geographical area for reference like survey areas, hedgerows or B roads

If a map is not for navigational use, add image alt text that:

is no longer than 1 or 2 sentences (about 150 characters)
identifies the type of image
includes its name if it has one - for example, 'Figure 1'
summarises what the map shows

For example, a press release includes a computer generated image for a new housing development. The image shows the a large housing development, new school and car parks.

Image alt text: 'CGI graphic showing new housing development.'

Unlike navigational maps, you do not need to include all the information the map shows in the document text.

Graphs and charts

A graphs or charts are complex images. If you include a graph or chart make sure it has:

all text horizontal (left to right)
a visible title using text positioned above the image
a legend or key to explain what any colours and patterns mean
axis labels with visible text
data labels with visible text showing data type and how much

The image should then:

be formatted as a single, flat image
have a text description added to nearby text explaining the information or data the image shows
leave alt text field empty, or if the text refers to the image, have alt text added to briefly explains the image,

For example, a bar chart shows the number of visitors to Nottinghamshire attractions in 2024.

Text on page: The longer description is styled as a bulleted list above the bar chart with the same data as in the chart.

Image alt text: no alt text added, or if the nearby text refers to the image, 'Bar chart showing visitors to Nottinghamshire attractions in 2024 as described in the previous section.'

Diagrams

Diagrams include flowcharts, process maps, structure charts and infographics.

They use:

images and text to show how things work or are organised
layout, colour, lines or arrows to show meaning

Only use a diagram if it makes the content clearer, or summarises a large amount of information. Diagrams need to be clear and easy to understand.

You must make your diagram accessible so people don't miss out on the important information it shows.

If you include diagram, make sure it:

is clear and easy to understand
has a clear starting point
follows a normal reading direction, from left to right and top to bottom
use simple shapes and as few different shapes as possible
have minimal text and annotations
avoids overlapping arrows, lines or text boxes
if it uses colour for meaning, it uses text, shapes or patterns too

The diagram should then:

be formatted as a single, flat image
have a text description added to nearby text explaining all the information or data the image shows
leave the alt text empty, or if the nearby text refers to the image briefly describe what the image is and where the text description is.

Consider alternatives to a diagram

We recommend using text structured under headings and subheadings instead of a diagram because it means that:

the content is accessible to more users
the content can easily be updated
users can zoom and alter the size of text
search engines can read the text and display it in search results
it displays better than a image on a mobile device