Spotlight 3

Alt Text 

(WCAG 1.1.1)

This week the spotlight is on alt text.

Alt text basics

According to WCAG 1.1.1 -  Non-text content  (Level A) non-text contents such as images, infographics, or diagrams and functional items such as custom buttons and logos should have alternative text added to them so that screenreaders can recognise them and read them out.


Screen readers basically convert text into speech. That is easy with written texts such as headings and body text, however, it gets more complicated with images. Alt text, that is short for alternative text, is aimed to ensure that people who use screen readers can have the full experience and not feel confused by incomplete explanations such as "The next image shows how much crime in the UK has increased in the last decade".  Alt text can also benefit people who have slow internet connections, as images that cannot load are replaced with the alternative text.

 We created a video summary of this spotlight:

Or expand this section to read the transcript.

A lot of people are talking about alt text, but when do you need them and how do you write them?

In this video, we’ll give you a recap of LCA Spotlight 3: alt text.


First, what’s alt text?

Alt text is short for alternative text and it’s exactly that. It’s an alternative way to convey the meaning of images without relying on the image itself.


Why do you need them?

People with visual impairments often use screen readers to understand content. With images, screen readers basically read out what's in the alt text area. If there's no alt text, people with visual impairment might miss out on the meaning of images. 

Alt text can also benefit people who have slow internet connections, as images that cannot load are replaced with the alt text.


So when do you need alt text?

You need it with images of course. But you also need it with other visual content such as diagrams, maps, logos, and functional items like buttons for example. 


Do you need alt text for all images?

No. The first rule of alt text is knowing when to use them.  If the caption already gives a full description, or if the image is purely decorative and the learners would not miss anything if it had been removed, it's best not to use alt text and waste the learners’ time. 


How do you mark an image as empty for alt text?

Many tools allow you to select a box to mark images as decorative. Alternatively, you may be able to remove the image from the focus order or add alt="" to the alt text field. If for some reason you cannot add alt text with your tool, an alternative is to add the alt text to the caption or the body text near the image, or even create a separate link to the alt text. 


So what’s the second rule of writing alt text? 

It’s to write them well. 

As they say, a picture paints a thousand words, but you also want to get to the point without wasting the learners' time. So, you need to consider what purpose the image has and therefore what elements of that image are important to the learners. In fact, one image can have many different alt text descriptions based on the audience, the context etc.  

We really like WebAims’ article on this topic because they go through several examples with the same image to show how the alt text may change based on the context. Definitely check it out. 


Is there a third rule? 

It’s to tidy it up. Use standard punctuation but avoid special characters that screen readers might have a lengthy way of reading out. Also, avoid using redundant details such as "image of" as screen readers already include that information along with the alt text so you'd be just repeating it.


So shall we look at a few examples? 

Let’s say you’re creating content on food safety and you have this image. 

You might write something like:

A person holding a white card saying “Food safety”.


Let’s see another example for the food safety training. 

The alt text of this image could be:

A person rinsing a colander of unpeeled potatoes in the sink with running water.


One more example. This time with a more complex image. 

In this case, the alt text needs to include detailed description to fully convey the image. So it might sound like this:

A table with various lab equipment, including a scalpel, test tubes, and conical flasks containing colorful liquid. In the center of the table, there is a cut open bell pepper and small slices of the pepper inside a petri dish. A person wearing a lab coat and rubber gloves is holding a piece of the bell pepper with tweezers and preparing to place it inside a test tube filled with orange liquid.


Just as with everything, writing good alt text takes practice, but we at LCA Spotlight are all about raising awareness of accessibility and helping learning content creators adapt accessibility principles one spotlight at a time. 

For more information on writing alt text for special images such as screenshots or diagrams, or more resources on how to add alt text for different content types, check out the resources we curated in the original spotlight.  

Finally, here's a visual summary:

Image description included in the transcript.
3 Rules of writing alt text

3 Rules of Writing Alt Text Image Transcript

3 Rules of Writing Alt Text

1. Know when to use them

Use them with: images and other visual content (diagrams, maps, logos, and functional items like buttons) 

Don’t use them if: the caption explains the content and with decorative elements. If that’s the case, mark these images as decorative. 

2. Write them well

Consider the purpose, audience, and context and explain in detail what is relevant. 

3. Tidy them up

Use standard punctuation and avoid special characters and redundant details.

The image ends with the LCA Spotlight logo.

Resources:

Discussion questions:

Get Involved: Come to the LCA Spotlight LinkedIn group and join the conversation.

When you post in the community, use the hashtag #LCASpotlightAltText

Spotlight 2: Assistive technology

Spotlight 4: Time limits