GovWire

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.

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.

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

View the original news story