Writing good text alternatives

Making your content more accessible

Amy Leak
Amy Leak
Sep 1, 2018 · 3 min read

They say a picture paints a thousand words. Alt text and captions give people who aren’t able to see pictures these words.

What’s the difference?

A caption is the visible description that accompanies an image. These are also read by assistive technology.

Alt text and captions make sure everyone gets the full experience. Only sometimes should you use them both. This is because they work best for different purposes. And, we might not need the screen reader to read both.

What makes a good text alternative?

Context: Read through the copy around your image. Does this explain it? If it does, don’t explain it twice.

Length: Keep it short and concise. Get to the point, but don’t compromise on detail you need for it to make sense.

Punctuation: Use full stops and commas so screen-readers speak in a more human way.

Which should I use?

Alt text only

Let’s try an example.

Bad: Couple on a beach
Good: Couple smiling and embracing on a beach

Photo by Edward Castro from Pexels

Do you see how the second piece of alt text communicated the emotion better?

Here’s a more abstract example. For this one, context is important. Imagine you’re reading an article about management tips for the workplace, and you see this image.

Bad: Bees
Good: Worker bees building honeycomb

The first piece of alt text might use the ‘keep it short’ rule, but it compromises on communicating the idea. Abstract images are often used to explain a concept, so include relevant details.

Caption only

For this example, the infographic is showing how clicking a link changes its colour.

Bad: Someone clicking a link on a promo, and it turns green
Good: An example of how clicking a link changes its colour

We’re trying to communicate the action and result of clicking a link. It doesn’t matter where the link is or what colour it changes to. You should also make clear it’s an ‘example’, and not a real design.

Alt text and caption

Use captions to accredit a person or source, if necessary. In these cases, the image should still use alt text to communicate its intent. Make sure you don’t duplicate details across the alt text and caption. The screen reader will speak both.

Whether you’re using alt text, captions, or both, you’re doing your bit for accessibility. Communicate images through language and make sure everyone can enjoy your content.

And yes, sadly Medium doesn’t have the option to add alt text. I’m working on it!

Amy Leak

Written by

Amy Leak

UX Writer for the BBC spending everyday looking for the right words.