Foundations: text descriptions

Posted on Monday, 24 January 2022 by Henny Swan in Design and development

Text descriptions are primary content, and when images do not have a text description, anyone who cannot see the image will not know its purpose. This means people may be unable to access content or perform related tasks.

Appropriate text descriptions provide the following benefits:

People browsing with a desktop screen reader or browsing with a mobile screen reader who cannot see the image can hear and understand its meaning or purpose
People browsing with speech recognition can target image buttons and graphical links by including the text description in the voice command if the image doesn't load and the text description is visible
People on slow networks where images don't load properly or who have them switched off can read the text description shown in place of the image in some browsers
Search engines are better able to index images with text descriptions

A black and white photo of Hasmukh, an older man of South Asian heritage. He is wearing his Metro Blind Sport cricket club shirt, sitting and proudly holding the top of his bat with both hands as the bottom rests on the floor as if he is waiting to go into bat — Hasmukh, a blind cricketer and screen reader user, says "Emails that have graphics with no text descriptions means I can't use them! This is a big problem with meeting invites. I've actually missed a few meetings because I can't read the time or date or find the join meeting button".

Deciding the type of image

The first step is to decide what type of image it is then what kind of text description it needs.

Ask yourself:

Does this image convey any information?
If this image was removed:
- Would it affect the meaning of the content?
- Would it change the user's experience?

If your answer is "No, the image does not convey meaning", it is probably decorative and doesn't need a text description.

If your answer is "yes" in each case, then you may have one of the following types of image, all of which need text descriptions:

Functional image
Informative image
Image of text
Complex image

Decorative images

Decorative images are used to improve the visual appearance of the page. They don't convey any information or add to the user experience. Types of decorative images include:

Visual styling (borders, spacers, corners)
Images which are described by the surrounding text

A screenshot of a decorative separator made up of four coloured circles — Typical example of a decorative image from the footer of the TetraLogical website.

Text descriptions for decorative images

Decorative images do not need text descriptions because they do not convey information or meaning. It is still important to handle decorative images in the right way though.

HTML: Use the alt attribute on the <img> element but do not give it a value: alt="". If a different approach is used to generate images, for example an icon font), apply aria-hidden="true" to the element used for the image.
Android: Use the android:contentDescription attribute on the image view, and set its value to @null
iOS: Set the isAccessibilityElement property on the image to false and do not provide a label

Images of text

Avoid images of text where possible because the visual quality of the text deteriorates for people browsing with screen magnification. If you have to use an image of text, the text description must contain the same words as the image itself.

A 'Sale now on! 25% off all products' image of text. — Typical example of an image of text.

Functional images

Functional images form part of interactive elements like links or buttons. The text description for a functional image should convey the intended action of the interactive element. For example, a button to start a new email might show an icon of a pen, but the text description should be "New email", not "Pen icon" because it's the button's action that's the important information.

A screenshot of an email icon made up of an envelope and a pointing arrow. — Typical example of a functional image forming part of a button (source: Microsoft Outlook)

Informative images

Informative images communicate information or add to the user experience in some way. Types of informative images include:

Photos that show people, scenery or objects that add to the experience of the content
Pictures of products and product variations
Credit card symbols for payment options

A screenshot of a cat followed by the text 'Pets are primarily kept for a person's company, rather than as a working animal. Two of the most popular pets are cats and dogs, but other animals commonly kept include rabbits, gerbils, parrots, fish, and guinea pigs'. — Typical example of an informative image. The image is closely related to the subject matter of the page content but not directly discussed. However, the fact that the image shows a cat means it is strongly recommended that a text alternative is provided - such as "An image of a ginger cat sitting on a kitchen floor".

Text descriptions for images of text, functional and informative images

HTML: Use the alt attribute on the <img> element to add the text description
Android: Use the android:contentDescription on the image view to add the text description
iOS: Use the accessibilityLabel attribute on the image to add the text description

Complex images

Complex images convey detailed, factual information like graphs and charts, illustrations and infographics. The text description must be accompanied by a more extended description or an alternative presentation of the image.

A screenshot of a pie chart that shows the sales at Acme Supermarket for April 2018: 14% Clothing, 16% Electrical goods and 70% food. — Typical example of a complex image, a pie chart.

Text descriptions for complex images

HTML

Use the alt attribute on the <img> element to add a short text description; then either:

Use the aria-describedby attribute to point to an element on the same page that contains a longer description of the image
Use the <details> and <summary> elements (with the <img> element inside the <summary> element) to create a disclosure component that reveals the longer description on request

Android

Use the android:contentDescription on the image view to add a long text description

iOS

Use the accessibilityLabel attribute on the image to add a long text description

Tips for writing effective text descriptions

Think about how you would describe the image to someone on the phone. Here are some other things to think about:

Keep text descriptions short and to the point, no more than a few words is about right
Think about the context of the image; the same image may have a different text description depending on how it's context of use
Do not use phrases like "picture of…", "image of…" or "… graphic" because screen readers will know it's an image based on the <img> element or the properties of the image in native apps
If it's relevant, use phrases like "Illustration of…", "Sketch of…" or "water colour painting of…" because they can help convey the style and nature of the image

WCAG 2.1 Success Criterion 1.1.1 Non-text Content (Level A)

More information

Next steps

Read more accessibility foundations posts, our WCAG primer or how assessments can help you identify issues in your websites, mobile applications, design systems, and other products and services.