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.