Writing good text alternatives
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?
Alt text stands for ‘alternative text’. This is the written description of an image on a website. It describes the image to screen reader users and appears if it doesn’t load.
A caption is the visible description that accompanies an image. These are also read by screen readers.
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.
*Medium doesn’t have the option to add alt text, so I’ve added captions on this occasion to all images.
What makes a good text alternative?
Both alt text and captions should consider:
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?
It’s worth noting, this is is an approach that’s worked for my team. I’m keen to hear of approaches you might use.
Alt text only
Use alt text for images that capture a mood or concept. The function of these images are to make someone feel a certain way. To those who can see the image, they don’t need an explanation.
Let’s try an example.
Bad: Couple on a beach.
Good: Couple smiling and embracing on a beach.
Notice how the second piece of alt text communicated the emotion better?
Here’s a more abstract example. For this one, context is important. Imagine that you’re reading an article about management tips for the workplace, and the following image is used.
Bad: Bees.
Good: Worker bees in a hive.
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
Use captions for images that need explanation. These are usually infographics or unfamiliar concepts.
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
Remember the image of the couple we talked about earlier? You might have noticed I added a caption to accredit the photographer.
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 to make accessible experiences. Communicate images through language and make sure everyone can enjoy your content.
