Images
How to choose and describe images, use alt text, produce accessible graphs, diagrams and infographics, and copyright standards for GOV.UK.
Only use images if they:
- provide context for your content
- help users understand information in a different way, like diagrams
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.
Avoid images which contain text. Write it in the body text instead.
Describing images
Images must be described with words for people who cannot see them.
Imagine that you’re reading out the content of the page down a telephone. When you get to the image, what would you say about it to help the listener understand the point the page is making?
When using photos, logos or icons, use simple images that can be explained easily with text.
Easy read uses pictures to support the meaning of text. Read about how to publish images in easy reads.
Alt text
Alt text is used as an alternative to an image for people who use assistive technology, like screen reading software.
Describe what’s happening in the image in the body text and leave the ‘Alt text’ field empty. 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 to make sense as though there’s no image on the page. For example, write “the health minister tweeted…”, instead of “an image of a tweet by the health minister”.
Do not duplicate alt text if you’ve written a description in the body text. This causes ‘auditory clutter’ for screen reader users.
You do not need alt text for images in Easy Read formats. This is because the concept or task should be explained in the words which accompany the image.
If you use an image that’s purely decorative, you do not need to describe it in the body text.
Find out how to publish images.
Captions
The caption field is optional. You can use a caption to:
- label a graph, infographic or diagram
- name a person in a photo
Do not use the caption to describe your image instead of putting it in the body text - some screen reading software does not read captions when the ‘Alt text’ field is empty.
If you do not need a caption, do not include one.
Graphs and charts
Simplify data as much as possible so that you can create simple charts using Markdown. When you create a chart using Markdown, users can toggle between viewing the data as a chart or a table.
There are some examples of graphs and charts you can publish using Markdown on GOV.UK.
If you cannot reproduce your data using a chart in Markdown, you may need to upload a graph as an image. It is best to use SVG (scalable vector graphic) format so that users can magnify the content.
SVGs are ‘scalable’ so retain the same quality no matter what screen resolution or size they are viewed at. This means users can magnify images by zooming in and out. The quality of bitmap file types like JPG and PNG reduces when they are magnified. If you only have a bitmap file, you should recreate it as an SVG.
To create an SVG, the tool you use to create graphs and charts must have a ‘save as SVG’ or ‘export as SVG’ option. Changing a bitmap file type into an SVG does not make it scalable - it must be done from the source file.
There are several free tools you can use to create SVGs. Some examples include:
- diagrams.net
- draw.io
- Figma
- Inkscape
- Gravit Designer
- Vectornator (Mac only)
Your organisation may already be using a paid tool which can create SVGs. Some examples include:
- Adobe Illustrator
- Affinity Designer
- InDesign
- PowerPoint (newer versions only)
- Sketch
If you have an older version of PowerPoint, you should be able to export a slide in an EMF format and then convert this to SVG using an online file converter tool. However, this is probably not a suitable solution if you are working with pre-release data.
When publishing graphs which show complex information, provide a text-based explanation of what the chart is showing. For example, you could describe the trends in body text and have a table showing the most important data points. You can also link to the raw data as an attachment, or provide a way for users to request it.
When describing the chart in the body text, avoid describing the structure of the graph or chart. For example, avoid saying things like: “The image is a bar chart showing EU funds by percentage on the vertical axis and EU countries on the horizontal axis”. Instead you should describe the data. Avoid being too vague or too broad. For example, instead of saying there is some data about percentages relating to EU countries, explain what’s happening within the data and any key trends.
If you need to add some text to the image for axis and data labels, use a sans serif font. You should avoid adding any other text into the image like headings or information about sources – this text should go in the body of the page.
You should avoid pie charts as these are the least accessible data visualisations when magnified. They also need extra considerations around the use of colour, and colour contrast.
Do not rely on colour alone to convey information. Ensure there is a high enough colour contrast ratio between segments, lines, text and background colour. You can use the glitch colour contrast checker or the WebAIM colour contrast checker.
There’s further guidance on creating accessible charts from the Government Statistical Service.
Diagrams
Sometimes it’s useful to use a diagram to visually convey a concept.
This guidance covers diagrams for public and internal use. It does not cover things like network diagrams which need to contain specific terminology and graphics.
Work out whether you need a diagram
Before deciding to use a diagram, you need to work out whether what you’re trying to convey is best done with text, or a diagram supported by text.
If you can convey the information in a clear and succinct way with text then you probably do not need a diagram. If a diagram helps you to make a subject clearer, or summarise a large amount of information, it’s helpful to include one.
Consider whether you can reduce the complexity of the thing you’re trying to convey, and work with a content designer to make sure the text is clear.
Keep diagrams simple
Diagrams need to be clear and easy to understand. Follow the Government design principles, for example by sticking to one idea per diagram.
When you’re drawing 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
Make sure the diagram is accessible to everyone
Use black and white as a default - and if you use colour, make sure the contrast meets WCAG AA standard. You can use a colour contrast checker.
It’s important not to rely on colour alone to convey meaning.
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.
Where possible, publish your diagrams using the SVG image format - this will allow users to zoom in and out.
Test your diagrams
You should test your diagrams with users - including users with access needs.
Infographics
An infographic is an image which usually displays data, graphs, charts or text to explain a complex process or overview of a subject.
Infographics can be hard to make accessible if they’re too complicated. This is because screen magnifiers may need to scroll horizontally and vertically across the image. This may make them hard to understand when not seen all at once. The image may also become blurred and pixelated when magnified.
Explain the process or topic with text before you consider creating an infographic.
If the infographic contains text, also provide the text in the body copy.
Do not use colour alone to show differences.
Image copyright standards
These copyright standards apply to all images on GOV.UK, including those within a publication.
If possible choose images that are free to use. These will usually be either:
- covered by crown copyright - these images are produced by or for government and can be reused by non-government users under the Open Government Licence
- available for reuse under a creative commons licence such as the CC-BY Licence
Paying for third party images
If you pay to use third party images you must:
-
Buy the right type of licence.
-
Accredit the image properly.
Buying the right licence
Content on all government websites will be permanently available on the UK Government Web Archive. If you’re using an image which is not covered by crown copyright you must:
- get worldwide rights
- get the rights to use the image forever (in perpetuity)
- get the rights to use the image on anything
- agree the fee
Image licences must not:
- be for a limited time period
- be based on page impressions
Do not use embedded images that remain under the control of the supplier.
Image credits
Always attribute images to their source, unless it’s an Open Government Licence (OGL) image. OGL images are covered by the statement at the foot of GOV.UK pages:‘Open Government Licence v3.0’.
Credit creative commons images and all third party images. State if the image cannot be reused for free.
Find out where to credit your image and how.
Using images of people
Check with the copyright holder if the people in the image are happy for you to use it.
Get written consent from people if you’re arranging the photography yourself.
Think about the context: avoid showing identifiable people in connection with things that may cause offence.