UX glossary · engl. Alt Text
Alt Text
Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information.
Imagine you can’t see, so your phone reads an online shop aloud to you. You land on a product page and hear: “Image, IMG_4711 dot JPG.” Then a button that’s announced only as “Image, link.” What the product is and what the button does remains a mystery.
This is exactly the problem alt text solves.
Explained simply
Alt text (short for alternative text) is a brief text version of an image. In HTML, it lives in the image element’s alt attribute and is usually invisible on the page. A screen reader, software that reads screen content aloud, announces it instead of the image. It also shows up when an image fails to load.
Think of it like this: you call a friend and tell them about a photo you just received. You don’t describe every pixel, only what matters: “Our dog is lying in the snow with a stick in its mouth.” That’s what good alt text does.
Success criterion 1.1.1 of the WCAG (Level A) requires that all non-text content has a text alternative that serves the same purpose. Purely decorative images are exempt, but they must be implemented so assistive technology can ignore them.
Purpose matters more than subject
The same text doesn’t fit everywhere. What counts is the job the image does on the page. The W3C offers an “alt decision tree” for this, a short series of questions. Roughly, there are three cases:
- Informative images convey content. The alt text briefly describes what matters for understanding.
- Functional images sit inside links or buttons. The alt text names the action or destination, so “Search” rather than “magnifying glass.”
- Decorative images carry no information. They get an empty attribute,
alt="", so screen readers skip them.
Keep in mind that an empty alt is not the same as a missing one. If the attribute is missing entirely, some screen readers read out the file name instead. That’s exactly what happens in the scenario above.
An example
Here’s an example: a bakery’s website shows a photo of its sourdough loaf. The alt text says “Image.” Next to it, a shopping cart icon works as a link, with no alt text at all.
After the fix, the photo reads “Sliced sourdough loaf with a dark, cracked crust.” The cart icon gets “Open cart.” The decorative swirl under the heading gets alt="". People listening to the page now get the same information as everyone else, without the clutter.
Why it matters
Missing alt text is one of the most common barriers on the web. The 2026 “WebAIM Million” analysis found images without alternative text on 53.1 percent of the home pages it tested. At the same time, few accessibility improvements are this quick to make. More typical pitfalls are covered in Why Accessibility Is More Than Contrast and Font Size.
In practice
- Write for the context. Ask yourself what someone misses if they can’t see the image. The same photo needs different text in a product catalog than in a blog post.
- Skip the filler. “Image of” or “graphic showing” is redundant, because screen readers already announce the image. A short sentence is usually enough.
- Check automatically and by hand. Tools like WAVE find missing attributes. Whether the text actually makes sense takes a quick look from a human.
Related terms
Screen Reader, Accessibility, WCAG, ARIA