--- title: "Alternativtext" url: "https://www.insideuxdesign.com/de/glossar/alternativtext" language: "de" description: "Was ist ein Alternativtext? Einfach erklärt mit WCAG 1.1.1, dekorativen Bildern und Beispiel. Erfahre, wie du gute Alt-Texte für deine Website schreibst." published: "2026-10-14T15:20:30+02:00" updated: "2026-10-14T15:20:30+02:00" --- # Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. - **Buchstabe:** A - **Englischer Begriff:** Alt Text UX-Glossar · engl. Alt Text # Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. Stell dir vor, du lässt dir einen Online-Shop von deinem Smartphone vorlesen, weil du nicht sehen kannst. Du landest auf einer Produktseite und hörst: „Bild, IMG\_4711 Punkt JPG“. Danach ein Button, der nur „Bild, Link“ heißt. Was das Produkt ist und was der Button tut, bleibt ein Rätsel. Genau hier setzt der Alternativtext an. ## Einfach erklärt Ein Alternativtext (kurz Alt-Text) ist eine kurze Textfassung eines Bildes. Er steht im HTML im Attribut `alt` des Bild-Elements und ist auf der Seite normalerweise unsichtbar. Ein [Screenreader](https://www.insideuxdesign.com/de/glossar/screenreader), also eine Software, die Bildschirminhalte vorliest, gibt ihn statt des Bildes aus. Er erscheint auch, wenn ein Bild nicht lädt. Ein Vergleich aus dem Alltag: Du rufst eine Freundin an und erzählst ihr von einem Foto, das du gerade bekommen hast. Du beschreibst nicht jedes Pixel, sondern das, worauf es ankommt: „Unser Hund liegt im Schnee und hat einen Ast im Maul.“ So funktioniert ein guter Alt-Text. Die [WCAG](https://www.insideuxdesign.com/de/glossar/wcag) verlangen in Erfolgskriterium 1.1.1 (Stufe A), dass alle Nicht-Text-Inhalte eine Textalternative haben, die denselben Zweck erfüllt. Rein dekorative Bilder sind ausgenommen. Sie müssen aber so eingebunden sein, dass assistive Technik sie ignorieren kann. ## Der Zweck entscheidet, nicht das Motiv Derselbe Text passt nicht überall. Entscheidend ist, welche Aufgabe das Bild auf der Seite hat. Das W3C bietet dafür einen „Alt Decision Tree“, einen Entscheidungsbaum mit wenigen Fragen. Grob lassen sich drei Fälle unterscheiden: - **Informative Bilder** vermitteln Inhalt. Der Alt-Text beschreibt kurz, was für das Verständnis wichtig ist. - **Funktionale Bilder** stecken in Links oder Buttons. Der Alt-Text nennt die Aktion oder das Ziel, also „Suchen“ statt „Lupe“. - **Dekorative Bilder** tragen keine Information. Sie bekommen ein leeres Attribut `alt=""`, damit Screenreader sie überspringen. Wichtig: Ein leeres `alt` ist etwas anderes als ein fehlendes. Fehlt das Attribut ganz, lesen manche Screenreader stattdessen den Dateinamen vor. Genau das passiert im Szenario oben. ## Ein Beispiel Ein Beispiel: Eine Bäckerei zeigt auf ihrer Website ein Foto ihres Sauerteigbrots. Der Alt-Text lautet „Bild“. Daneben ist ein Warenkorb-Symbol als Link eingebunden, ganz ohne Alt-Text. Nach der Überarbeitung heißt es beim Foto „Sauerteigbrot mit dunkler, rissiger Kruste, angeschnitten“. Das Warenkorb-Symbol bekommt „Warenkorb öffnen“. Die geschwungene Zierlinie unter der Überschrift erhält `alt=""`. Wer die Seite hört, bekommt jetzt dieselben Informationen wie alle anderen, ohne Ballast. ## Warum das wichtig ist Fehlende Alt-Texte gehören zu den häufigsten Barrieren im Netz. Die Auswertung „WebAIM Million“ fand 2026 auf 53,1 Prozent der untersuchten Startseiten Bilder ohne Alternativtext. Gleichzeitig ist kaum eine Verbesserung der [Barrierefreiheit](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) so schnell umgesetzt. Weitere typische Stolperstellen beschreibt der Artikel [Warum Barrierefreiheit mehr als Kontrast und Größe ist](https://www.insideuxdesign.com/de/blog/warum-barrierefreiheit-mehr-als-kontrast-und-groesse-ist). ## In der Praxis - **Schreib für den Kontext.** Frag dich, was jemand verpasst, der das Bild nicht sieht. Dasselbe Foto braucht im Produktkatalog einen anderen Text als in einem Blogartikel. - **Lass Füllwörter weg.** „Bild von“ oder „Grafik mit“ sind überflüssig, weil Screenreader das Bild ohnehin ankündigen. Ein kurzer Satz reicht meist. - **Prüf automatisch und von Hand.** Tools wie [WAVE](https://www.insideuxdesign.com/de/ressourcen/wave) finden fehlende Attribute. Ob ein Text sinnvoll ist, zeigt nur ein kurzer Blick durch einen Menschen. ## Verwandte Begriffe [Screenreader](https://www.insideuxdesign.com/de/glossar/screenreader), [Barrierefreiheit](https://www.insideuxdesign.com/de/glossar/barrierefreiheit), [WCAG](https://www.insideuxdesign.com/de/glossar/wcag), [ARIA](https://www.insideuxdesign.com/de/glossar/aria) ## Quellen - [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/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion) [ ### Dark Patterns Dark Patterns sind Gestaltungstricks, die Menschen zu Entscheidungen drängen, die sie eigentlich nicht treffen wollen, etwa versteckte Kündigungen oder vorausgewählte Zusatzoptionen. ](https://www.insideuxdesign.com/de/glossar/dark-patterns)