Images

Avoid using images for unnecessary decoration. Only use images if there’s a real user need. If images are needed they should be landscape, 2:1 aspect ratio.

Use the image transform tool to format images.

Avoid images that contain text

Generally, you should avoid using images that contain any sort of text. Use written content or other alternatives wherever possible.

Any text inside an image will be difficult to read, especially for users that need to read text using:

• screen readers
• copy and paste
• highlight
• resize
• recolour

Remember to avoid using images for unnecessary decoration, even if it’s an ‘image of text’.

Show text as written content, instead of images

It’s usually unnecessary to use an image to merely show some text (known as an ‘image of text’).

Give the information as written content instead, or use other alternatives.

Examples of unnecessary ‘images of text’ include images that show:

• the contents of a post from social media
• an excerpt from a document
• key facts from a slide presentation

If you do choose to use the image anyway, include written content nearby that conveys the same meaning and context.

Find out more about ‘images of text’ on the Web Accessibility Initiative website.

Alt text

Alternative text, or alt text, is read out by screen readers and displayed if an image does not load or if images have been switched off.

All images should include the alt attribute, even if it’s left empty without alt text (alt="").

When to use alt text

Only add alt text when you need to describe visual details you cannot practically include in the written content.

There are some cases when an empty alt="" attribute is more appropriate. These include:

• a decorative image that does not include important content
• an icon with a text label, where the alt text would repeat the text label
• an image used in a link, where the image is not needed to understand the link

To decide if an image needs alt text, see the Web Accessibility Initiative alt decision tree.

Writing good alt text

Good alt text:

• tells people what information the image provides
• describes the content and function of the image
• is specific, meaningful and concise

Use normal punctuation, like commas and full stops, so the text is easy to read and understand.

Generally, aim for no more than 2 sentences of alt text.

Do not write alt text that:

• includes the name of the photographer or person who created the image
• starts with ‘Image of’, ‘Graphic of’ or common information that would repeat across every image
• repeats information from the page
• includes extra information not in the image

---

Published 21 June 2024
Last updated 6 August 2024