GovWire

Images in GOV.UK can be broken down into three categories:

• informative
• decorative
• charts, diagrams, infographics and scientific equations

Informative images

Do not use images alone to provide information. This will exclude users who cannot see or access the image.

Text is easier to read than images when scaled up by people using screen magnifiers. Images may become pixelated and need to be scrolled vertically and horizontally when zoomed in.

Only use images if they help users understand information in a different way.

Avoid images with text. Write it in the body text.

Informative images can help users understand the written text in a different way. You must leave the Alt text field empty and write a description in the body of content. This means the description is available to everyone.

Screen reading software will ignore images without alt text. If you can, describe the content of the image as though there is no image on the page. For example, write the minister tweeted, instead of an image of a tweet by the minister.

Another way to make sure you are describing the image properly is to imagine that youre reading out the content of the page on a telephone. When you get to the image, what would you say to help the listener understand the point the page is making?

When using photos or logos, use simple images that can be explained easily with text.

You can use a caption to attribute an image or name a person in an image.

Decorative images

Decorative images are generic images which do not give any additional information to the content. For example, an image of laptops in a blog post, or featured content on departments organisation pages.

You do not need alt text for decorative images.

Format

Check the examples of tables and charts you can create using Govspeak on GOV.UK.

If you cannot create your chart in Govspeak, you may need to upload it as an image. Upload the image in SVG (scaleable vector graphic) format. SVGs allow users to magnify images without losing any quality. Find out how to create an SVG file in the images guidance.

Colours

Do not use colour alone to convey information. Some visually impaired users will not be able to see colour differences. Ensure there is a high enough colour contrast ratio between segments, lines, text and background colour.

Read more about using colours in charts on the Government Analysis Function website.

Charts

All charts should have two titles, a headline title and a statistical title. The headline title of the chart should summarise the main message of the chart. This should be followed by a statistical title that describes the data shown.

Example

Charts as images

If you provide your chart as an image, the alt text field for the chart should be left blank. Instead, the chart should be followed by at least one of the following:

• a description of the chart directly under it
• a table of the raw data
• a link to the raw data in an accessible file

If you write a description, imagine you are describing the chart to someone over the phone. Avoid describing the chart vaguely or too broadly. For example The bar chart shows EU funds by percentage on the vertical axis and EU countries on the horizontal axis is too broad.

You need to explain what is happening in the data and any important trends. Do not just repeat the headline title, for most charts, the description will need to be more detailed than the title.

If you choose to provide the raw data as a table or in an accessible file in GOV.UK, make sure your table is formatted correctly and consider if it is an appropriate alternative. For example, when you have a chart showing a long time series of data, a description of the trends will be more appropriate than a table. The experience should be the same as looking at the chart.

Guidance from the Government Analysis Function

Read guidance from the Government Analysis Function about:

• making analytical publications accessible for information about publishing charts in an accessible way
• releasing statistics in spreadsheets for information about creating accessible attachments of raw data
• making tables accessible
• chart titles and chart formatting

Diagrams

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. Follow the government design principles, for example by sticking to one idea per diagram.

When youre creating the diagram, try to:

• follow normal reading direction - users want to read from left to right
• avoid overlapping connector lines
• use simple shapes - and as few different types as possible
• make it clear where the starting point is for process and flow charts
• use black and white as a default

Include a detailed explanation of the processes and relationships explained in the diagram in the body text. This is helpful for users who cannot see the diagram.

Leave the Alt text field empty.

Infographics

An infographic is an image which usually displays data, graphs

View the original news story