- Alternativtexte sind kein optionales Extra: WCAG 2.2 Erfolgskriterium 1.1.1 stuft fehlende Alt-Texte als Stufe-A-Verstoß ein, das ist die unterste Konformitätsstufe und damit eine Grundanforderung, keine Kann-Bestimmung.
- Ob ein Bild einen Alt-Text braucht, entscheidet seine Funktion, nicht sein Motiv. Dekorative Bilder erhalten
alt="", bedeutungstragende eine präzise Beschreibung. - Der häufigste Fehler ist nicht das leere Attribut, sondern der nichtssagende Text: „Bild“, „Grafik“, Dateinamen oder Keyword-Stuffing.
- Funktionsbilder in Links und Buttons folgen einer eigenen Regel: der Alt-Text beschreibt das Ziel oder die Aktion, nicht das Bildmotiv.
Ein guter Alternativtext beantwortet eine einzige Frage: Welche Information würde fehlen, wenn das Bild unsichtbar wäre? Wer das konsequent beantwortet, schreibt automatisch bessere Alt-Texte als die Mehrheit der Websites im Netz. Denn laut dem WebAIM Million Report, der jedes Jahr eine Million Startseiten automatisch prüft, haben 53,1 % aller Homepages fehlende Alt-Texte, und fehlende oder nichtssagende Alternativtexte zählen seit Jahren zu den sechs häufigsten Barrierefreiheitsfehlern. Dieser Ratgeber erklärt, wie die Regel wirklich funktioniert, und zeigt an konkreten Vorher-Nachher-Beispielen, was den Unterschied macht.
Was ein Screenreader mit dem Alt-Text macht
Ein Screenreader liest den Bildschirminhalt vor. Er liest Text, Überschriften, Links und Buttons. Trifft er auf ein Bild, liest er das alt-Attribut vor. Hat das Attribut einen Text, hört die Nutzerin genau das. Hat das Attribut keinen Text (alt=""), überspringt der Screenreader das Bild wortlos. Fehlt das Attribut ganz, liest er ersatzweise den Dateinamen vor: „DSC_04421_FINAL_V2.jpg“. Das klingt absurd, passiert aber täglich auf Millionen Seiten.
Wer noch nie eine blinde Person bei der Webnutzung beobachtet hat: Der Screenreader liest nicht linear von oben nach unten, er überfliegt auch, springt zwischen Überschriften, durchsucht Linklisten. Bilder, die als „Grafik“ oder mit Dateinamen landen, sind in diesem Kontext nicht nur wertlos, sie stören aktiv den Fluss. Ein kurzes, präzises alt-Attribut ist für Screenreader-Nutzerinnen das, was für sehende Nutzer das Bild selbst ist.
alt-Attribut liefert die Textalternative für ein Bild. Screenreader lesen es vor, Suchmaschinen werten es aus, und es springt ein, wenn das Bild nicht geladen wird. Fehlt es ganz, liest der Screenreader den Dateinamen.WCAG 1.1.1: die rechtliche und technische Grundlage
Die technische Grundlage ist klar. WCAG 2.2 Erfolgskriterium 1.1.1 „Nicht-Text-Inhalte“ verlangt, dass jede bedeutungstragende Grafik eine Textalternative hat, die denselben Zweck erfüllt wie das Bild. Wichtig: 1.1.1 ist Stufe A, die unterste Konformitätsstufe. Das bedeutet, ein fehlender Alt-Text ist kein kleiner Schönheitsfehler, sondern ein grundlegender Zugänglichkeitsfehler.
Über die europäische Norm EN 301 549 fließen diese Anforderungen seit dem 28. Juni 2025 direkt in das Barrierefreiheitsstärkungsgesetz (BFSG) ein. Wer einen Onlineshop betreibt oder digitale Dienstleistungen an Verbraucher anbietet, muss WCAG 2.2 Stufe AA einhalten, und Stufe AA schließt alle Stufe-A-Kriterien selbstverständlich ein. Alt-Texte sind damit kein Kann, sondern ein Muss.
MDN, das Referenzhandbuch für Webentwickler, fasst es in einem Satz zusammen: „Alt text is also displayed on the page if the image can’t be loaded for some reason … For these reasons and others, provide a useful value for alt whenever possible.“ Nützlich, nicht nur vorhanden.
Welcher Bildtyp welche Regel braucht
Die W3C WAI hat dafür einen Alt Text Decision Tree veröffentlicht, der jeden Bildtyp systematisch durchläuft. Die Kurzfassung in einer Tabelle:
| Bildtyp | Regel | Beispiel |
|---|---|---|
| Dekorativ (reine Gestaltung, kein Inhalt) | alt="", Screenreader überspringt |
Hintergrundmuster, Trennlinie als Bild |
| Informativ (trägt eigene Information) | Kurze, präzise Inhaltsbeschreibung | Produktfoto, Teamporträt, Illustration |
| Funktional / in Link oder Button | Ziel oder Aktion beschreiben, nicht Motiv | Verlinktes Logo, Icon-Button |
| Komplex (Diagramm, Infografik, Karte) | Kernaussage im Alt-Text, Datenwerte im Fließtext oder als Tabelle | Balkendiagramm, Organigramm |
| Text als Bild | Den exakten Wortlaut des abgebildeten Textes wiederholen | Angebotsbanner mit Preis, Zitat-Grafik |
| Bild im Formular als Label | Feldzweck beschreiben (wird zur programmatischen Bezeichnung) | Lupe als Suchfeld-Icon |
Die entscheidende Frage lautet bei jedem Bild: Verändert sich der Informationsgehalt der Seite, wenn das Bild unsichtbar ist? Wenn ja, braucht es einen beschreibenden Alt-Text. Wenn nein, gehört alt="" rein, nicht gar kein alt. Das fehlende Attribut ist der schlimmste Fall.
Vorher-Nachher: konkrete Beispiele für jeden Bildtyp
Abstrakte Regeln nützen wenig ohne Gegenüberstellung. Hier sind typische Bilder mit schwachem und mit gutem Alt-Text.
Produktfoto in einem Onlineshop
| Variante | Alt-Text | Problem |
|---|---|---|
| Schwach | alt="Schuhe" |
Keine Marke, kein Modell, keine Farbe. Ein Screenreader-Nutzer kann nicht entscheiden, ob das der gesuchte Artikel ist. |
| Schwach | alt="Damen-Laufschuh günstig kaufen Nike Adidas Sale" |
Keyword-Stuffing. Unbrauchbar für Menschen, schädlich für SEO. |
| Gut | alt="Brooks Ghost 16 Damen-Laufschuh in Navy, Größe 38" |
Nennt alle kaufentscheidenden Attribute: Marke, Modell, Farbe, Größe. |
Teamfoto auf der Kontaktseite
| Variante | Alt-Text | Problem |
|---|---|---|
| Schwach | alt="Bild von unserem Team" |
„Bild von“ ist redundant, der Screenreader kündigt schon an, dass es eine Grafik ist. Und „unser Team“ sagt nichts Konkretes. |
| Gut | alt="Fünfköpfiges Beratungsteam der Mustermann GmbH vor dem Eingang in München, v.l.: Jana Müller, Klaus Weber, Sandra Meier, Tim Schulz, Petra Hoffmann" |
Konkret, identifizierbar. Wenn Personen namentlich relevant sind (Ansprechpartner), gehören Namen rein. |
Logo auf der Startseite (verlinkt)
| Variante | Alt-Text | Problem |
|---|---|---|
| Schwach | alt="Logo" |
Beschreibt das Bild, nicht den Link. Der Screenreader kündigt „Link, Grafik, Logo“ an. Wohin geht der Link? |
| Gut (nur Logo, kein Linkziel) | alt="Mustermann GmbH" |
Firmennamen nennen, reicht. |
| Gut (Logo ist Homelink) | alt="Mustermann GmbH, zur Startseite" |
Linkziel beschreiben, wenn der Link das einzige Element im <a> ist. |
Icon-Button (Suche)
| Variante | Alt-Text | Problem |
|---|---|---|
| Schwach | alt="Lupe" |
Beschreibt das Piktogramm. Ein Screenreader-Nutzer hört „Button, Grafik, Lupe“. Was passiert beim Klick? |
| Gut | alt="Suche starten" |
Beschreibt die Aktion. Hört sich an wie ein normaler Button-Text. |
Zitat-Grafik (Text als Bild)
| Variante | Alt-Text | Problem |
|---|---|---|
| Schwach | alt="Kundenstimme" |
Der abgebildete Text fehlt komplett. Eine Screenreader-Nutzerin bekommt den Testimonial-Inhalt gar nicht. |
| Gut | alt="'Die Zusammenarbeit war unkompliziert und das Ergebnis übertrifft unsere Erwartungen.', Sandra M., Geschäftsführerin, Muster GmbH" |
Exakter Wortlaut des abgebildeten Textes plus Quelle. |
Die vier häufigsten Formulierungsfehler
Diese Muster führen fast immer zu schlechten Alternativtexten. Wer sie kennt, vermeidet die meisten Fehler von vornherein.
Füllwörter wie „Bild von“ oder „Grafik zeigt“
Screenreader kündigen ein Bild bereits als Bild an. „Bild von einem Hund“ wird dann vorgelesen als „Grafik, Bild von einem Hund“. Der Alt-Text beginnt direkt mit dem Inhalt: alt="Hund beim Apportieren".
Keyword-Stuffing
„SEO Agentur München Webdesign günstig“ im Alt-Attribut eines Bürofotos schadet doppelt. Er macht den Text für Screenreader-Nutzer unbrauchbar, und Suchmaschinen erkennen und bestrafen absichtliche Häufungen. Ein guter Alt-Text ist auch ein guter SEO-Signal, aber nur weil er präzise ist, nicht weil er Keywords anhäuft.
Zu allgemein
„Person am Computer“ passt auf tausend verschiedene Bilder und sagt deshalb nichts. „Buchhalter prüft Jahresabschluss in Excel“ ist konkret und nützlich.
Zu lang
Mehr als 125 Zeichen sollten die Ausnahme sein. Verbreitete Screenreader wie JAWS oder NVDA geben längere Texte in Blöcken von etwa 125 Zeichen aus, was den Vorlesefluss zerhackt. Was nicht in diese Länge passt, gehört in den Fließtext oder in eine aria-describedby-Verlinkung.
Bilder in Links, Buttons und Formularen
Das gilt auch für das verlinkte Produktbild auf einer Kategorieseite. Führt das Bild auf die Produktdetailseite, ist der produktivste Alt-Text der Produktname, weil der Link sonst keine verständliche Bezeichnung hätte. Wenn daneben ein sichtbarer Linktext steht, der denselben Produktnamen nennt, darf das Bild alt="" tragen, weil der Text bereits die Information trägt.
Formularfelder, die ein Bild als Label nutzen (z.B. eine Lupe als einzige Beschriftung des Suchfelds), benötigen das Bild-alt als programmatisches Label. Screenreader lesen es vor, sobald der Nutzer in das Feld wechselt. alt="Suchbegriff eingeben" statt alt="Lupe".
Das title-Attribut ist kein Ersatz für alt. Manche Screenreader lesen es vor, manche nicht, und das Verhalten ist inkonsistent. MDN empfiehlt ausdrücklich, title nicht als Substitut einzusetzen und es auch nicht mit dem alt-Wert zu duplizieren, weil einige Screenreader dann beide Texte vorlesen.
Diagramme und Infografiken: wenn kurz nicht reicht
Ein Balkendiagramm mit zwölf Datenpunkten lässt sich nicht in 125 Zeichen erschöpfend beschreiben. Hier gilt eine zweiteilige Strategie:
- Der
alt-Text nennt den Typ der Darstellung und die Kernaussage:alt="Balkendiagramm: Umsatzentwicklung 2021–2025, Wachstum von 18 % in vier Jahren". - Die vollständigen Datenwerte stehen in einer sichtbaren Tabelle darunter oder im Begleittext, so dass auch sehende Nutzer ohne Grafik-Rendering (z.B. Druckansicht) alle Zahlen nachvollziehen können.
Für sehr komplexe Darstellungen gibt es zusätzlich aria-describedby, das auf ein Element im DOM verweist, das die ausführliche Beschreibung enthält. Das ist serverseitig sicher und funktioniert zuverlässig in allen gängigen Screenreadern. Das veraltete longdesc-Attribut dagegen ist aus dem HTML-Standard gestrichen und darf nicht mehr eingesetzt werden.
Wer SVG-Infografiken baut, hat eine elegantere Lösung: role="img" am <svg>-Element, einen <title>-Knoten als Kurztext und einen <desc>-Knoten als Langbeschreibung, beide per aria-labelledby referenziert. Wie das im Detail aussieht, zeigt der Ratgeber zu den 12 häufigsten Barrierefreiheitsfehlern.
Ein Beispiel aus der Praxis
In einem Onlineshop-Projekt haben wir eine Produktkategorie mit rund 200 Artikeln geprüft. Die Alternativtexte waren durchgehend vorhanden, also kein automatisch messbares Problem. Der Inhalt war es: Alle 200 Bilder hatten alt="Produktbild". Eine blinde Kundin, die über die Tastatur durch die Kategorie navigiert, hörte 200 Mal hintereinander „Grafik, Produktbild“ ohne einen einzigen Unterschied. Kein Modellname, keine Farbe, keine Größe. Für die Kaufentscheidung war das genauso nutzlos wie kein Alt-Text.
Die Ursache war ein Bildimport-Skript, das den Alt-Text automatisch als „Produktbild“ befüllte. Nach der Korrektur des Skripts und einer Batch-Aktualisierung per WP-CLI mit dem echten Produktnamen aus den Metadaten war das Problem behoben. Kein einzelnes Bild hätte manuell angefasst werden müssen. Das zeigt: Alternativtext-Probleme sind oft kein Redaktionsversagen, sondern ein Systemfehler, der sich systematisch lösen lässt.
Wie solche Fehler im Bestand schnell aufzudecken sind, und welche weiteren Barrieren oft danebenlaufen, zeigt der Ratgeber 12 häufigste Barrierefreiheitsfehler. Wer Bilder gleichzeitig auch für die Performance optimieren möchte, findet in Bilder fürs Web optimieren die passende Ergänzung.
Sofort-Checkliste: Alt-Texte prüfen
- Hat jedes
<img>-Element einalt-Attribut? (Fehlendes Attribut ist schlimmer als leeres.) - Tragen rein dekorative Bilder
alt="", also explizit leer? - Beginnen die Alt-Texte informationstragender Bilder direkt mit dem Inhalt, ohne „Bild von“ oder „Grafik zeigt“?
- Sind Produktbilder mit allen kaufentscheidenden Attributen beschrieben (Name, Farbe, Modell)?
- Beschreiben Bilder in Links und Buttons das Linkziel oder die Aktion, nicht das Bildmotiv?
- Enthält kein Alt-Text absichtliche Keyword-Häufungen?
- Bleiben die meisten Alt-Texte unter 125 Zeichen?
- Haben Diagramme und Infografiken eine zugängliche Datentabelle oder Langbeschreibung im Fließtext?
- Wird
titlenicht als Ersatz füraltverwendet? - Haben SVG-Grafiken
role="img",<title>und<desc>?
- Alt-Texte sind Stufe-A-Pflicht nach WCAG 1.1.1 und damit das Fundament jeder BFSG-Konformität.
- Die Regel variiert mit dem Bildtyp: dekorativ bedeutet
alt="", funktional bedeutet Ziel oder Aktion beschreiben, informativ bedeutet Inhalt beschreiben. - Die häufigsten Fehler sind nicht das fehlende, sondern das nichtssagende Attribut: „Produktbild“, Dateiname, Keyword-Stuffing.
- Viele Alt-Text-Probleme entstehen durch Automatisierung. Ein einmal falsch eingestelltes Import-Skript erzeugt tausende sinnlose Attribute. Das lässt sich genauso systematisch beheben.
Häufige Fragen
Muss wirklich jedes Bild einen Alt-Text haben?
Jedes <img>-Element braucht das alt-Attribut, aber nicht jeden mit Inhalt. Rein dekorative Bilder erhalten alt="". Fehlt das Attribut ganz, lesen manche Screenreader den Dateinamen vor, was den Vorlesefluss stört und einen WCAG-Fehler erzeugt.
Zählt ein sprechender Dateiname als Alternativtext?
Nein. Dateiname und alt-Attribut sind getrennte Felder. Ein sprechender Dateiname kann die Bildoptimierung für Suchmaschinen leicht unterstützen, ersetzt das alt-Attribut aber nicht. Screenreader lesen beide getrennt aus, und der Dateiname greift nur, wenn das alt-Attribut komplett fehlt.
Ändert sich der richtige Alt-Text, wenn dasselbe Bild zweimal vorkommt?
Ja. Der Alt-Text hängt vom Kontext ab, nicht nur vom Bild. Das Foto einer Büroküche kann auf der Karriereseite „Gemeinschaftsküche im Hamburger Büro“ tragen und in einem Artikel über Teamkultur „Kollegen beim Mittagessen in der Büroküche“. Entscheidend ist, welche Information das Bild an dieser Stelle vermitteln soll.
Was ist mit Bildern in barrierefreien Formularen?
Formularfelder brauchen ein programmatisch verknüpftes Label. Ist ein Bild das einzige Label eines Feldes, wird sein Alt-Text zur Feldbezeichnung. Das Suchfeld mit Lupe-Icon braucht alt="Suchbegriff eingeben", nicht alt="Lupe". Mehr zu Formular-Labels im Ratgeber barrierefreie Formulare.
Ist ein langer Alternativtext besser als ein kurzer?
Nicht grundsätzlich. Verbreitete Screenreader geben Alt-Texte in Blöcken von etwa 125 Zeichen aus, deshalb ermüden sehr lange Texte. Wer mehr Kontext braucht, nutzt sichtbaren Begleittext, eine Tabelle oder aria-describedby, statt den Alt-Text auf mehrere Sätze aufzublasen.
Hilft der Alt-Text auch für die Suchmaschinenoptimierung?
Ja, aber auf andere Weise als oft gedacht. Google liest Alt-Texte aus, um den Bildinhalt zu verstehen, und wertet sie für die Bildsuche. Ein präziser, natürlichsprachiger Alt-Text verbessert also die SEO, aber gezieltes Keyword-Stuffing schadet. Der Nebeneffekt einer gut beschriebenen Bildbibliothek ist, dass die Produktbeschreibungen insgesamt stärker werden. Mehr dazu im Ratgeber Produktbeschreibungen, die verkaufen.