How to write alternative text

We can’t use text to replicate the same value of what a well-sighted user gains from an image. We can at least make alternative text as useful as possible.

The WAI’s alt Decision Tree and WCAG’s techniques give guidance on the types of images, along with an understanding of if and when to add alternative text. They also provide some examples, but not much help with the how.

Alternative text should convey important, contextual and imaginable information.

Important information

For most websites, a user isn’t interested in reading an entire paragraph on the details of an image.

We should include the parts that make up an image without including every detail, as that overloads the user with information.

Example

Including every detail may be necessary depending on the context of the website.

For most, this is far too much and reading a description with every detail like this can be frustrating.

Here is the description distilled to the key information:

All alternative text should include this key important information from an image.

Context is key

Depending on where your image is being used can determine what should be included in alternative text.

Images on websites often have a reason or a purpose for being there. Try to include what the image is conveying.

Understand what role the image has in the context of the website. Add what is happening in the image and if there are emotions, a tone or a story surrounding it.

Example

Let’s imagine this image on a website selling cars to set the tone. Based on the image, you’d expect them to be luxurious cars.

Applying this context gave further meaning on top of the important information which you would want to include in the alternative text.

This is contextual information.

Now let’s imagine the image on a Diversity & Inclusion page for a fashion brand’s corporate website.

The context has shifted and its purpose is now more specifically targeting the brand’s audience and to show the company’s diverse culture. The tone is still important but the main focus is now on the person in the image and their attributes.

Notice how context can shift an image’s alternative description. It’s not always about describing the image, it’s also about what the image means in the context of its placement.

Imaginable

Finding the important and contextual information only takes you so far. If you only follow those steps, the text will often end up being cold or blunt.

I recommend adding some flourish or detail to help someone depict the image in their mind.

You might include what people are doing in the image, how vivid colours are, the smile on a person’s face, or the feeling an image provides.

No one wants to read a boring description of an image. Make alternative text useful, but also make it imaginable.