How to write alt text for images

Who relies on it

People who are blind or have low vision hear alt text through a screen reader. It also shows when an image fails to load, and search engines read it to understand the image.

When an image has no alt attribute at all, many screen readers read out the file name instead, so a visitor hears something like “IMG underscore 4021 dot jpg”.

Decide what the image is for

Alt text depends on the job the image does on the page, not just on what it shows. Ask which of these it is:

• Informative: it shows something the visitor should know. Describe that in a short phrase: “Grilled salmon with rice and greens”.
• Functional: it is a link or a button. Say where it goes or what it does: “Home”, “Search”, “Order online”, not “magnifying glass icon”.
• Text in an image: a banner or a flyer with words on it. Put the words in the alt text, or better, in real text on the page.
• Decorative: a background swirl or a photo that repeats what the text already says. Use an empty alt, alt="", so screen readers skip it.
• Complex: a chart or a map. Give a short alt that says what it is, and put the details in text next to it.

Examples

<!-- Informative -->
<img src="salmon.jpg" alt="Grilled salmon with rice and greens">

<!-- A logo that links home: name the destination -->
<a href="/"><img src="logo.svg" alt="Joe's Diner home"></a>

<!-- Decorative: empty alt, so screen readers skip it -->
<img src="divider.png" alt="">

<!-- An icon-only button: the name goes on the button -->
<button aria-label="Search"><svg aria-hidden="true">…</svg></button>

Mistakes we see most

• Starting with “image of” or “picture of”. Screen readers already say it is an image.
• File names or stock-photo IDs as alt text.
• Stuffing keywords into alt text for search. It reads badly and search engines don't reward it.
• Repeating the caption word for word, so the visitor hears the same sentence twice. Use alt="" when the text beside the image already says it all.
• Leaving out the alt attribute on decorative images. Missing alt and empty alt are not the same: empty alt means “skip this”.
• Writing “logo” for a logo. Use the organisation's name.

How long should it be?

Usually a short phrase or one sentence. There is no hard character limit, but if you need more than a sentence or two, the details probably belong in the page text, where everyone can read them.