4 min read#alt-text#accessibility#images

Alt Text for Images: Write It Once, Do It Right

What alt text is for, how to write a good description in one sentence, when to leave it empty, and the mistakes that make it useless.

Alt text is a short written description attached to an image. It is easy to skip, because on a normal screen you never see it. But for some visitors it is the only way the image exists, and for search engines it is one of the few ways to understand a picture. Writing it well takes a minute per image, and you only need to do it once.

Who alt text is for

People who use screen readers hear the alt text spoken in place of the image. People on a poor connection may see the alt text if the picture fails to load. Search engines read it to learn what the picture shows. In each case, the description is standing in for something the reader cannot see.

That frame tells you how to write it: imagine describing the picture to someone on the phone, in a single sentence, so they understand why it is on the page.

What a good description looks like

Say what the picture shows and, if it matters, why it is there. “A baker pulling a tray of sourdough loaves from the oven” tells the whole story. “Bread” says too little. “Photo of a baker taking a picture of loaves for the website, baked with love since the day we opened” says far too much.

Keep it short. A sentence is usually enough. Do not begin with “image of” or “picture of”, because the reader already knows it is an image. Leave out opinions and slogans.

When to leave it empty

Some images are decoration: a divider line, a background texture, a flourish. They carry no information, so describing them only clutters the experience for someone using a screen reader. For those, leave the description empty on purpose, so that the reader skips them quietly.

If an image contains text, such as a menu saved as a picture, the alt text should include the words, or better, the words should appear as real text on the page.

When an image is also a link, its description should say where the link goes, not what the picture looks like. A logo that links to the homepage is better described as “Example Bakery, home” than as “red logo”.

A worked example

This is an invented before and after, shown only as wording. Example Bakery reviews its images.

Before: photo of loaves described as “IMG_2041”. Decorative divider described as “line”. Logo link described as “image”.

After: loaves described as “Sourdough loaves cooling on a wooden rack”. Divider left empty. Logo link described as “Example Bakery, home”.

Alt text and search

Search engines use alt text as one clue about what an image shows, which can help a picture appear when someone searches for it. The honest way to benefit is simply to describe the picture accurately. Repeating the same keyword in every description does not help; it reads as noise to a screen reader and to a search engine alike. Write for the person who cannot see the image, and the search benefit follows quietly.

Common mistakes

  • Leaving the file name as the description.
  • Stuffing the description with search words.
  • Describing decorative images that carry no meaning.
  • Writing paragraphs where a sentence would do.
  • Forgetting that an image used as a link needs a destination, not a description.

Try this today

  1. Open your five most important images and write a one-sentence description for each.
  2. Mark decorative images as decoration so their description stays empty.
  3. Check that every image used as a link says where the link leads.

Field notes

  • Alt text stands in for the picture when someone cannot see it.
  • One plain sentence is usually enough.
  • Skip “image of” and skip the slogans.
  • Decorative images get an empty description on purpose.
  • For linked images, describe the destination.

Would you rather not build all of this by hand? websiites.com creates a complete website from a paragraph about your business, and you can see the finished site before you pay anything. The how it works page walks through the steps.