How to write good alt text for images

What alt text is for

Alt text is the text alternative of an image, written in the alt attribute. Screen readers read it aloud, braille displays show it, and the browser shows it when the image does not load. Search engines can use it as well. The web standard for accessibility, WCAG, asks for a text alternative that does the same job as the image (success criterion 1.1.1, level A).

The key idea: alt text is not a caption, and not a description of the picture for its own sake. It says what the image adds to the page. The same photo can need different alt text on two pages, or none at all.

Four kinds of images

• Informative images add meaning: a photo, an icon next to a phone number, a diagram. Write a short alt text that conveys that meaning.
• Functional images sit inside links and buttons. The alt text names the action or the target, not the picture: 'Search' for a magnifying glass, 'Print this page' for a printer icon.
• Decorative images add nothing: a border, a spacer, a flourish, or a picture that only repeats the text next to it. Give them an empty alt attribute (alt="") so that screen readers skip them, or put them in the stylesheet as a background.
• Images of text are a last resort. If you need one, the alt text repeats the words in the image. A logo that is not a link gets the name of the organisation.

How to write a good alt text

1. 1Ask why the image is on the page. What would a visitor miss if it were gone?
2. 2Write what matters for that purpose, in a phrase or in one sentence.
3. 3Start with the content. A screen reader usually announces that something is an image, so 'image of' or 'photo of' rarely helps.
4. 4Do not repeat what the text next to the image already says. If it says everything, the image is decorative and gets an empty alt.
5. 5Read the alt text aloud without looking at the page. Does it make sense on its own?

Common mistakes

• No alt attribute at all. Some screen readers then read out the file name.
• A file name or a code as alt text, such as 'IMG_2041.jpg'.
• The same string of keywords on many images. Alt text is for people first.
• A long description of a purely decorative image.
• Describing the look of a button image instead of its action. A search button is not 'magnifying glass', it is 'Search'.

How long should it be?

WCAG 1.1.1 does not name a number of characters. The advice of the W3C is to keep it short, ideally a phrase or a sentence. For charts and other complex images, give the full information as text on the page and keep the alt text short. If you need more than a sentence, the image probably carries content that belongs in the page text.

Check your site

To find images without a useful alt text, run the free alt text checker on a page. To get suggestions for many images, use the Alt texts tool. An automatic suggestion can miss what matters on your page, so read every text and change it when it does not fit the purpose of the image.

The tools of Do4U help with the typing, not with the decision: whether an image is informative, functional or decorative is something you know best. Check again after big changes to your site.