Images
Guidance for 188体育 content publishers on how to use images and make them accessible. This chapter also includes the copyright standards for 188体育.
If you work on a service team, read .
To find out how to upload images on 188体育 read Images and videos in the How to publish manual.
Images in 188体育 can be broken down into three categories:
- informative
- decorative
- charts, diagrams, infographics and scientific equations
Avoid using images with text for both informative and decorative images. Using text in images makes it harder for some users to understand the image.
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.
Informative images can help users understand the written text in a different way. You must leave the 鈥楢lt 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 鈥渢he minister tweeted鈥︹€�, instead of 鈥渁n image of a tweet by the minister鈥�.
Another way to make sure you are describing the image properly is to imagine that you鈥檙e 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 the caption and credit field to 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 188体育.
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 .
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
The headline title: Oliver stays on top of baby names list
The statistical title: Figure 1: Number of baby boys given the top 10 most popular names, England, 2020
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 鈥淭he 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 188体育, 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:
- for information about publishing charts in an accessible way
- for information about creating accessible attachments of raw data
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 you鈥檙e 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 鈥楢lt text鈥� field empty.
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鈥檙e too complicated. This is because screen magnifier users may need to scroll horizontally and vertically across the image. This may make them hard to understand when not seen all at once. It can also be difficult to describe in text. The image may also become blurred and pixelated when magnified if you鈥檙e not using an SVG format.
If you choose to publish an infographic you should provide a plain text version of the content. This should explain everything that is shown in the infographic and be in the body text next to the infographic.
Read more about creating accessible infographics in the .
Scientific equations
Describe the equation in the body text and leave the 鈥楢lt text鈥� field blank.
These copyright standards apply to all images on 188体育, including those within a publication.
If possible choose images that are free to use. These will usually be either:
- covered by - these images are produced by or for government and can be reused by non-government users under the
- available for reuse under a such as the CC-BY licence
If you want to change the image, such as by cropping it or changing the colours, check that the licence you鈥檙e using allows for adaptations or derivatives. For example, some Creative Commons licences have a 鈥榥o derivatives鈥� (ND) rule.
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 . If you鈥檙e 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鈥檚 an Open Government Licence (OGL) image. OGL images are covered by the statement at the foot of 188体育 pages:鈥樷€�.
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鈥檙e arranging the photography yourself.
Think about the context: avoid showing identifiable people in connection with things that may cause offence.