Image Alt Text: What Screen Readers Say About Pictures

Why it exists

Not everyone experiences the web visually. Images can create major barriers for people using screen readers, users on slow networks who disable images, or even search engines trying to index content. Image alt text provides a machine-readable, textual equivalent to ensure no one misses out on critical information or functionality.

The mental model

Think of alt text as a script for an assistant describing a webpage over the phone. You wouldn't just say "there's a picture here." You'd explain what the picture shows (if it's important) or what the picture does (if it's a button). If the picture is just a decorative swirl, you'd tell your assistant to ignore it and move on.

How it works

The alt attribute on an HTML <img> tag provides the text alternative. The content of that attribute depends entirely on the image's purpose. There are three primary categories: informative, functional, and decorative. For an informative image like a news photo, the alt text should briefly describe the essential information. For a functional image like an icon used as a button, the alt text must describe the action. For a purely decorative image, the attribute should be present but empty (alt=""), which signals to screen readers to skip it. Omitting the alt attribute entirely is an error that may cause a screen reader to read the image's filename aloud, creating noise and confusion.

When to use it

An alt attribute should be present on every <img> tag. Use descriptive text for informative images like photos, illustrations, and simple charts. Use action-oriented text for images used as links or buttons (e.g., "View your shopping cart"). Use an empty alt attribute (alt="") for any image that does not convey information and serves only as visual decoration.

When not to use it

You should never completely omit the alt attribute from an <img> tag. The only time the text content should be empty is for purely decorative images. For complex images like detailed graphs or charts, the alt text should provide a brief summary and ideally point to a longer, more detailed description available elsewhere on the page.

One canonical example

An e-commerce site uses a magnifying glass icon inside a button to trigger a search. A bad implementation is alt="magnifying glass icon". This describes the visual but not the function. A good implementation is alt="Search products". This tells the user exactly what the button does. If the site has a decorative swoosh graphic next to the page title for branding, its tag should be <img src="swoosh.png" alt="">. This ensures a screen reader simply ignores it.