Using images in 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.
On this page
What complex images are
Complex images contain a lot of information – more than can be explained in a short 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
Give complex images a text description
Complex images need a text description so people who cannot 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.
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 the map is
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.
The following is an example of a way to make a map for navigational use accessible on a web page:
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 (marks 'decorative'), 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 to briefly explain what the image is.
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
- summarises what the map shows
For example, a press release includes a computer generated image for a new housing development. The image shows 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
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 all the information or data the image shows
- have alt text added to briefly explains what the image is and where the long description is
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: '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 well designed, clear and easy to understand.
You must make your diagram accessible so people do not miss out on the important information it shows.
If you include a 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
- uses simple shapes and as few different shapes as possible
- has minimal text and annotations
- avoids overlapping arrows, lines or text boxes
- also uses text, shapes or patterns if it uses colour for meaning
The diagram should then:
- be formatted as a single, flat image
- have a text description added to nearby text that explains all the information or data the diagram shows
- leave the alt text empty - or if the nearby text refers to the image use it to briefly describe the image and where the long text description is
Consider alternatives to a diagram
Consider using text structured under headings and subheadings on web pages instead of diagrams so:
- the information is accessible to more users
- it can be easily updated
- users can zoom and alter the size of text
- search engines can read the text and display it in search results
- it displays easier on a mobile device
