What alt text is, what it should say, and when to leave it empty

Alt text is the value of the alt attribute on an img element. A screen reader reads it aloud or renders it as Braille. A browser shows it when the image doesn't load. The W3C's images tutorial treats it as the text alternative that carries the information or function the image represents, so people who can't see the image still get what it was there to say.

The tutorial also lists the other people it helps. Speech input users can focus a linked image with one voice command. Mobile users who turn images off to save data still see the text. Search engines can index the image.

Start with the image's purpose. An informative image, such as a photo or illustration that conveys something, needs at least a short description of the essential information. A decorative image that only adds visual polish gets an empty alt="", so screen readers skip it. A functional image, such as an icon inside a link or button, should describe the action, so a printer icon says print.

Images of text should repeat the words in the image, and the W3C advises avoiding text in images at all unless it's a logo. Graphs and diagrams need a complete text equivalent of the data.

When several images convey one piece of information, one of them carries the alt text for the group. An image map needs alt text for the overall image and for each clickable area. The W3C publishes an alt decision tree for sorting images into these categories.

The same picture can need different alt text on different pages. The W3C's own example is a bird. On a website about parks, its exact type and look may deserve only a brief mention, while a website about birds may need it described in detail. That's why the author has to write alt text for the page it appears on, and a file name won't do.

Google's image SEO guide says it finds images in the src attribute of the img element, including an img inside a picture element, and that it doesn't index images set as CSS backgrounds. An image placed as a CSS background therefore has no img element to carry alt text and isn't indexed by Google. Its good example is an img with both src and alt.

The same guide says Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF in img src. When you use srcset or picture for responsive images, it recommends always including a fallback src, because some browsers and crawlers don't understand those attributes.