Images that convey meaning have suitable alternative text and images that serve a decorative purpose have a null alternative text assigned

Design Notes

Ensure images and charts have an appropriate text alternative

People who can't see a meaningful image need an alternative to understand the content. You need to add "alt-text" to explain what's in the image.

Informative images

The content of the alt-text depends on the image and its context. If the image is part of the main content of the page (not a functional image - one that triggers an action), use the alt-text to describe the image in a way that makes sense in the context.

You don't need to explain that it's an image because screenreaders usually announce that. Keep alt-text to a sentence or 2 and no longer than 250 characters.

Imagine you were reading the page out to a friend. How would you describe the image?

If you have a complex image that you can't describe in short alt-text (such as an infographic), include a longer description in some other way. You can use an expander, for example, underneath the infographic with a text explanation.

If your image has text which conveys its meaning, follow the guidance on functional images. An example would be a link to a health app which includes a brand image and the name of the app. The app name says the same as the brand image, so the image doesn't need explaining.

Decorative images

Decorative images are there to attract users' attention or motivate them, but they don't help users understand the topic. An example might be a stock photo of a person holding a mobile phone on the 'Contact Us' page.

If your image is decorative, give it a null text alternative like this: (alt="").

More information

Developer Notes

Use alternative text for images in content

Informative

Provide equivalent alternative text descriptions for non-text content such as images and multimedia to allow people using assistive technologies to understand and enjoy the content on the page.

All images need to have an alt attribute or titles, for SVGs, assigned.

Informative images detail

You don't need to explain that it's an image because screenreaders usually announce that. Keep alt-text to a sentence or 2 and no longer than 250 characters.

Imagine you were reading the page out to a friend. How would you describe the image?

Decorative

Images that serve a decorative purpose should have a null value (alt="") so that screen readers can ignore the image. If images are not assigned a null value it can result in a repetitive or confusing experience for screen reader users.

Complex

Infographics require an alternative description in the form of a transcript, this provides a full text-only version of the infographic which can be easily accessed by all users. This can be done by either:

Providing a link to a new page which contains the transcript;
Placing the transcript below the image within an accordion, which allow users to hide and show the transcript.

For charts, allow users to access equivalent information in the form of an HTML data table.

Information and tools

Use alternative text for functional images

Some images are "functional". That means that they initiate actions. If people can't see the image, they need an alternative. The alternative text should describe the action the user is taking rather than the describing the image.

Use "alt‑text" for images like PNG or JPEG. If using an SVG for a functional image, ensure focusable="false" attribute is used to prevent focus issues with older browsers and use the <title> of the SVG to provide alt text.

Information and tools

W3C guide to functional images

Testing Notes

There are appropriate alternatives for all non-text content

Each (non-decorative) image has appropriate alt text

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose

Details of exceptions

Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose
Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content
Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology

Steps to check

Turn on 'Display alt attribute' feature of Web Developer extension and check results
Run an automated tool to identify issues and check through results

Impact range: Medium - High

Test type: Semi-automated

Tool

Web Developer extension
ARC Toolkit (Images) - some issues with alt text such as missing alt attributes can be automated, but the appropriateness of text alternatives require manual review

WCAG Reference: Understanding Success Criterion 1.1.1: Non-text Content