Alt text (alternative text) is a written description of an image for users who cannot see it. Good alt text states what an image means. It is not a description of the image itself.

For example, the alt text for the GOV.UK logo might be ‘GOV.UK’ or ‘UK government website’. It would not be ‘Royal crown above the word GOV.UK written in capital letters’.

Alt text makes images accessible to:

• screen reader users, because it allows them to hear what the image conveys
• users who cannot download the image, because they can read the alt text that appears in place of the image
• search engines, because alt text helps them decide how relevant the page content is to the search

When to add alt text

Images on GOV.UK broadly fall into one of 2 categories: decorative and informative.

Decorative images

An image is considered decorative if it does not add any important information to what’s already in the written content.

Do not add alt text to decorative images.

Examples of decorative images on GOV.UK include generic photos such as the ones that illustrate news stories, or featured content on departments’ organisation pages.

Informative images

Informative images give additional information that’s relevant to the body text. You need to make this information accessible in one of the following ways:

• a short alt text description
• a description in the body text next to the image, and no alt text
• a short alt text description, with a full description of the image content in the adjacent body text

Do not repeat the same wording in alt text that’s in the adjacent body text. Captions may be an exception to this. For example, a photo of a minister that’s captioned with their name and role should have the same information in alt text. This is because some screen readers do not read captions if the alt text field is empty.

For a complex image like a graph, give a summary description in the alt text field. In the adjacent body text, include a full description of the information.

Read the section ‘Graphs, charts, diagrams and infographics’ in this chapter to find out how to do this.

Logos

Logos can be decorative or informative, depending on the context. Add alt text only if you decide it’s an informative image.

Easy Read formats

Do not use alt text for the images in Easy Read formats. Easy Read is a specialist format using extremely simplified text and a shortened version of information. Simple images are used to help users understand the content.

Adding alt text to these images creates auditory clutter and increases the difficulty of the content.

More guidance and tutorials on alt text

To understand more about images and alt text, go to the images tutorial produced by the Web Accessibility Initiative.

Read an explanation and examples of alt text good practice by the Disability awareness organisation WebAIM.

Read 5 golden rules for compliant alt text, by AbilityNet, the charity that focuses on disability awareness in technology.

When text is the primary purpose of the image, for example a scanned image of a minister’s correspondence, you must publish a full transcript in HTML alongside the image.

Examples of long text documents might include:

• photo of a page in a book
• PDF of a scanned written document
• block quotes

These types of images are only used in exceptional circumstances on GOV.UK.

Avoid them if you can.

Images that include some text

Avoid using images that use text as part of the image, where possible. If it cannot be avoided, for example you have to publish a graphic that includes a campaign slogan, you should repeat the exact words from the image in the body text next to it.

Incidental text

If an image contains incidental text that has no purpose for the content, do not repeat the words in alt text or body text. An example of this would be background signage in a photo of something else.

The caption field is optional. You can use a caption to:

• label a graph, infographic or diagram
• name a person in a photo
• attribute an image - see Images and videos in the How to publish manual.

If you add a caption, you should also add alt text. A caption with no alt text is bad for screen reader users because:

• some assistive technology does not read captions if the alt text field is empty, which means users miss the information
• some assistive technology always reads captions, but if the alt text field is empty the user may not be aware that the caption relates to an image

Do not use the caption field to describe the image or duplicate content in the body text.

If you do not need a caption, do not use one.

Use SVG (scalable vector graphic) format for images composed of simple structures and data or text such as:

• graphs
• infographics
• diagrams

Use bitmap file types like JPG and PNG for featured images and photos.

SVG

SVGs are ‘scalable’ so keep the same quality no matter what screen resolution or size they are viewed at. This means users can easily magnify images by zooming in and out. The quality of bitmap file types like JPG and PNG goes down when they are magnified.

Find out how to create an SVG file in Images and videos in the How to publish manual.

Do not use colour on its own to convey information. Users who are colourblind cannot easily see colour differences.

Use the glitch colour contrast checker or the WebAIM colour contrast checker to check that the contrast ratio in the image is accessible.

The information in data-rich images needs to be accessible to all users, including people with visual impairments.

To make data-rich images accessible you need to do all of the following:

• write a sentence summarising what the content shows in the alt text field
• describe the main information in words in the adjacent body text, or provide a link to the dataset
• check colour and contrast are accessible - read the section on ‘Colour and contrast’ in this chapter

Describing data-rich images

Describe the data, not the format.

Explain what’s happening in the data, and any trends that stand out.

For example, you could describe the trends, and add a table showing important data points, or link to an attachment of the raw data.

Ways you can use body text to make complex images accessible include:

• a table containing the important data
• a description of the most important information and what it means
• a link sending users to a page with the full dataset
• an attachment containing the full dataset, either on the publication page or as an inline attachment with a short explanation or link
• an option for users to request a copy of the raw data

If it’s an infographic or a diagram, include an explanation of the important processes, relationships and information in the body text.

If you can, work with the designer to plan the text description before or at the same time as the image is designed. This should help to avoid the image becoming too complicated.

Formatting data-rich images

If you need to add some text to the image for axis and data labels, use a sans serif font. Avoid adding any other text into the image like headings or information about sources – these should go in the body content of the page.

Using Markdown to create 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 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 in an SVG format, and include the information in the body text.

Find out how to create an SVG file in Images and videos in the How to publish manual.

Using diagrams

Only use a diagram to support the content if it makes the subject clearer, or summarises a large amount of information.

Diagrams need to be clear, simple and easy to understand. If you’re advising on or creating a diagram, read the Government design principles and:

• follow normal reading direction - users want to read from left to right
• avoid overlapping lines that connect the shapes of a diagram
• 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 or make sure the colour contrast is accessible

Scientific equations can be published as SVG images. SVG images can be magnified without losing quality.

If you can, include the equation in the body text as well. If that’s not possible, you will need to add the equation in alt text.

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:

1. Buy the right type of licence.

2. 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.