Always write good alternative text

Caring about web standards and quality publishing means writing alternative text.

ByBaylee Woodley
A sheet of plain white Braille rests flat.

Images on a website can be really important content. They give context, shape meaning, and move readers. It is really important that images have accompanying alternative text.

In summary

Here’s the TLDR. in order to succeed at quality publishing, accessibility practices, and SEO, we recommend you:

  1. always add alt text right away when you upload images to the web,
  2. edit the default alt text for specific uses of images, as needed,
  3. write short descriptions of the image, roughly one or two sentences,
  4. use capitalization and punctuation,
  5. avoid redundant phrases like “an image of” or “this photo is”,
  6. use the phone test, or radio test, to help prompt you.

The purpose of alternative text, aka, alt text

Alternative text is a way to ensure that the meaning of an element, like an image, is understood by folks with impaired vision. In HTML, the code for an image includes an attribute, the alt attribute, that allows us to pass on the purpose of the image to folks who can’t see the image.

When the alt text has been written, it shows up on adaptive technology, such as screen readers.

In WordPress there is a box for adding alt text. It appears to the right when you select an image in the media library.

In HTML the alt attribute in an image tag looks like this: <img src=“link-to-image-goes-here.jpg” alt=”the alternative text that describes the image goes here” height=”” width=”” />

Alt attributes are necessary.

Why is alt text necessary?

The digital age is a highly visual one. Images are used as a primary means of communication and are often more important than text.

People who are visually impaired have a right to good communications. By providing meaningful alt text those responsible for publishing can do their part in ensuring this right is taken seriously.

As an added bonus including alt text also helps with searchability. Search engines, like Google, reward those with accessible websites. This means that websites that have images with alt text will have an edge in search engine optimization (SEO), and publishers that ignore this web standard will fall behind in search rankings.1

What does meaningful alt text look like?

Writing alt text can be tricky. But here’s a few ideas to get you in the alt text zone.

Start by imagining that you are describing the image to someone on the other end of a phone call. Think about what they would want to hear.2

If someone is swimming in the image, notice if they’re indoors or outdoors. What is the weather like? Also think about the impact of the image or what features of the image evoke an emotional response – is someone smiling triumphantly?

Is someone hunched over and teary? Are a group of people with defined leg muscles running up the side of a mountain during a sunrise? In short, consider the purpose of the image.

In general, we recommend publishers avoid putting text on an image. But we know it happens. If images do have text on them, then the alt text should include that text.3

Alt text should not be too long. 125 words or less. We tend to use one or two sentences. Shortness ensures it will be compatible with most screen readers.4 There is also no need to start by saying “a photo of…” or “This is an image of…”

It’s important to use capitals and punctuation. However, maybe dial back on gratuitous punctuation, such as semi-colons or long dashes, which do not consistently convert properly on adaptive technologies.

It is also important to be consistent. All images on your site should have alt text.

This is why we strongly recommend, for all images that you upload to your website, that you immediately enter the default alt text. Then, if you need to edit the alt text for a particular use, or instance, of the image, you can do that in the block editor on that page or post.56

A close up of a woman resting her headphones on her neck around her shoulders.
Here’s an example of alternative text: A woman’s mouth and shoulders. She has dark, curly hair and black headphones around her neck. She is indoors, but the background is out of focus.

Notes

  1. See The importance of alt attributes.
  2. W3 tutorial on images.
  3. See How to write alt text…
  4. See http://www.perkinselearning.org/technology/blog/how-write-alt-text-and-image-descriptions-visually-impaired
  5. Nice article on alternative text in broader contexts.
  6. The feature image of braille has been cropped and licensed under a creative commons licence 2.0.