GovWire

Images

Government Digital Service

August 23
15:03 2022

If youre a service designer, read image guidance for designing online services.

To find out how to upload images on GOV.UK read Images and videos in the How to publish manual.

Alt text

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 whats 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 thats 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 thats in the adjacent body text. Captions may be an exception to this. For example, a photo of a minister thats 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 its 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.

Images of text

When text is the primary purpose of the image, for example a scanned image of a ministers 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.

Captions

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.

Formats: SVG, JPG and PNG

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

Related Articles

Comments

  1. We don't have any comments for this article yet. Why not join in and start a discussion.

Write a Comment

Your name:
Your email:
Comments:

Post my comment

Recent Comments

Follow Us on Twitter

Share This


Enjoyed this? Why not share it with others if you've found it useful by using one of the tools below: