--- title: "Alt Text" url: "https://www.insideuxdesign.com/en/glossar/alt-text" language: "en" description: "What is alt text? A plain-language guide with WCAG 1.1.1, decorative images and a real example. Learn how to write useful alt text for your website." published: "2026-10-14T15:20:31+02:00" updated: "2026-10-14T15:20:31+02:00" --- # 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. - **Buchstabe:** A - **Englischer Begriff:** Alt Text 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](https://www.insideuxdesign.com/en/glossar/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](https://www.insideuxdesign.com/en/glossar/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](https://www.insideuxdesign.com/en/glossar/accessibility) improvements are this quick to make. More typical pitfalls are covered in [Why Accessibility Is More Than Contrast and Font Size](https://www.insideuxdesign.com/en/blog/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](https://www.insideuxdesign.com/en/ressourcen/wave) find missing attributes. Whether the text actually makes sense takes a quick look from a human. ## Related terms [Screen Reader](https://www.insideuxdesign.com/en/glossar/screen-reader), [Accessibility](https://www.insideuxdesign.com/en/glossar/accessibility), [WCAG](https://www.insideuxdesign.com/en/glossar/wcag), [ARIA](https://www.insideuxdesign.com/en/glossar/aria) ## Sources - [W3C WAI: Understanding Success Criterion 1.1.1: Non-text Content. W3C, 2026](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) - [W3C WAI: An alt Decision Tree. W3C, 2024](https://www.w3.org/WAI/tutorials/images/decision-tree/) - [WebAIM: Alternative Text. WebAIM, 2021](https://webaim.org/techniques/alttext/) - [WebAIM: The WebAIM Million: The 2026 report on the accessibility of the top 1,000,000 home pages. WebAIM, 2026](https://webaim.org/projects/million/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio) [ ### Conversion A conversion is a desired action on a website or in an app, such as a purchase or a signup. The conversion rate shows what share of visits leads to one. ](https://www.insideuxdesign.com/en/glossar/conversion)