Images and alternative text

We can describe the content/purpose of images for low-vision people, to provide them with an equivalent experience to sighted people. There are a few decisions to be made to ensure the best experience; note that this does not apply to background images, which are added to the page via CSS styles.

Companion video: Introduction to alternative text

Alt tags

An image without an alt tag does not meet the Web Content Accessibility Guidelines (WCAG). Here’s an example of the HTML markup for an image on a web page:

<img src="images/dinosaur.jpg" alt="Dinosaur">

Whether the alt tag should be empty or hold a text description of the image — known as alternative text or alt-text (“Dinosaur” in the preceding example) — depends on whether the image is considered to be decorative, functional or informative.

To help you make that decision the Web Accessibility Initiative (WAI) has compiled an alt decision tree.

Companion video: Alternative text image types and when the alt attribute should be empty

Decorative images

Decorative image examples from the Web Accessibility Initiative.

Screen reader users generally agree that the mood, feel and aesthetic of a web page are immaterial. You need to decide whether an image qualifies as decorative in the context of why you are adding it to the page.

Functional images

Functional images are used as the trigger for some type of action. An image or icon inside a link or button without a visible text label is a functional image.

Functional image examples from the Web Accessibility Initiative.

Informative images

Informative images provide critical supporting information or additional meaning to the text content of a document.

Informative image examples from the Web Accessibility Initiative.

Images of text

You may decide that you have no alternative but to include an image of text: perhaps it requires a specific appearance that can’t be achieved with CSS styles; or perhaps it must be displayed in a certain way, such as a mathematical equation.

Examples of images of text from the Web Accessibility Initiative.

It’s best to avoid using such images because they can become distorted or pixelated, making the text in the image difficult to read.

Writing helpful alternative text

The most appropriate alt-text will depend on the context in which the image is being used. The aim is to provide a concise description of the essential aspects of the image. For informative images, you may find the following framework helpful:

1. Object (the main focus of the image)
2. Action (what’s happening)
3. Context (both the surrounding environment in the image and how the image is being used)

Companion video: Write great alternative text

Image captions

You may have the option to include a visible caption to accompany an image.

For example, imagine a photo of two people shaking hands. The alt-text for the image could be as simple as “Two people, shaking hands.” while the caption text might be “Jane Doe (left) welcomes Joe Bloggs (right) to the Acme Corporation team.” The alt-text and caption must not repeat each other.

Infographics

Infographics can contain a lot of information, and may not be particularly easy to read on smaller screens. They benefit from a two-step approach:

1. Provide a short alternative text description for the image.
2. Repeat the information shown in the infographic as text content on the same page.

Here is an example of an accessible infographic from WebAIM. The alternative text for the image informs screen reader users that the text description is provided after the image, and the headings help to structure the content and make the text description easy to find and understand.

Complex diagrams and charts

Follow the links for further guidance on:

• Screen captures to illustrate documentation
• Graphs and charts
• Flowcharts
• Maps
• Mathematical and scientific equations