WCAG 1.1.1: Nicht-Text-Inhalte

WCAG 1.1.1 verlangt, dass jeder Inhalt, der kein Text ist – Bild, Icon, Diagramm, Audio-Schaltfläche, CAPTCHA –, eine Textalternative bekommt, die denselben Zweck erfüllt wie das Original selbst. Rein dekorative Elemente bekommen stattdessen ein leeres alt="", damit assistive Technologien sie geräuschlos überspringen.

(Englisch: Non-text Content.)

Das Wichtigste in Kürze

• 1.1.1 ist Stufe A und damit die unterste Hürde: Wer sie reißt, erreicht keine Konformität – auch nicht teilweise.
• Drei Arten von Bildern, drei Antworten: informativ (Aussage in Worte fassen), funktional (Funktion benennen), dekorativ (alt="").
• Ein fehlendes alt ist etwas anderes als ein leeres alt. Fehlt das Attribut, lesen Screenreader ersatzweise den Dateinamen vor – img_2043.jpg wird Buchstabe für Buchstabe angesagt.
• Der Alt-Text beschreibt nicht das Motiv, sondern den Zweck. Dasselbe Foto braucht im Produktkatalog eine andere Alternative als im Stimmungsteil einer Startseite.
• Der BITV-Test zerlegt 1.1.1 in vier Prüfschritte: 1.1.1a Bedienelemente, 1.1.1b Grafiken und Objekte, 1.1.1c leere alt-Attribute für Layoutgrafiken, 1.1.1d Alternativen für CAPTCHAs (Stand Juli 2026).
• Automatische Tests finden nur die halbe Miete: Ob ein alt existiert, ist messbar; ob es stimmt, entscheidet ein Mensch.

Abgrenzung – hier steht die Pflicht. Wie du einen Alt-Text formulierst, steht unter Alt-Texte richtig schreiben; ob ein konkretes Bild überhaupt eine Beschreibung braucht, klärt die Alt-Text-Entscheidungshilfe.

Braucht jedes Bild einen Alt-Text?

Ja – ein alt-Attribut braucht jedes Bild. Informative Bilder bekommen eine Beschreibung, rein dekorative ein leeres alt="".

Der Normtext ist kurz und weit: Alle Nicht-Text-Inhalte, die den Nutzern präsentiert werden, haben eine Textalternative, die denselben Zweck erfüllt. Das Wort Zweck ist der Kern. Es geht nicht darum, ein Bild zu beschreiben, sondern darum, seine Aufgabe auf der Seite zu ersetzen. Für jeden Nicht-Text-Inhalt gilt deshalb eine von drei Regeln:

1. Informativ (Foto mit Aussage, Diagramm, Screenshot, Karte): Die Textalternative transportiert die Information. Bei einem Balkendiagramm ist das nicht „Balkendiagramm“, sondern das Ergebnis, das man ablesen soll.
2. Funktional (Bild als Button oder Link): Der Text beschreibt die Funktion, nicht das Aussehen. Also „Suchen“ und nicht „Lupe“, „Warenkorb öffnen“ und nicht „Einkaufswagen-Symbol“.
3. Dekorativ (Zierbild, Trenner, Verlaufshintergrund): leeres alt="" bzw. ein CSS-Hintergrund. Dann taucht das Element in der Ausgabe gar nicht auf.

Zwei Sonderfälle regelt 1.1.1 ausdrücklich. Bei Audio und Video genügt an dieser Stelle eine beschreibende Bezeichnung – die eigentlichen Alternativen regeln die 1.2.x-Kriterien. Und CAPTCHAs brauchen mindestens zwei Varianten, die verschiedene Sinne ansprechen (Bild und Ton), plus eine Alternative für Menschen, die weder das eine noch das andere nutzen können.

Wie lang darf so ein Text sein? Die Norm nennt keine Grenze. In der deutschen Prüfpraxis gilt: Was über rund 80 Zeichen hinausgeht, gehört in eine lange Beschreibung neben dem Bild – etwa als <figcaption> oder als Datentabelle unter dem Diagramm. Der Alt-Text bleibt dann die kurze Identifikation.

Wer den Wortlaut nachlesen will: das Understanding-Dokument des W3C zu 1.1.1 führt jeden Sonderfall mit Beispielen auf.

Wen betrifft es besonders?

Für blinde Menschen ist der Alt-Text nicht eine Zusatzinfo, sondern das Bild. Ein Screenreader ohne Alternative sagt „Grafik“ – und die Nutzerin weiß danach genau so viel wie vorher. Bei einem Bild-Button ohne Namen sagt er „Schalter“, und dann steht man vor einer Tür ohne Beschriftung.

Es trifft aber deutlich mehr Leute als nur diese Gruppe. Auf einer Braillezeile ist der Alt-Text das Einzige, was ankommt. In Diktier- und Sprachsteuerungs-Systemen ist er der Name, über den ein Icon-Button überhaupt ansprechbar wird. Bei gedrosselter Mobilverbindung ersetzt er das nicht geladene Bild. Davon profitieren nebenbei auch Suchmaschinen und KI-Systeme, die Bilder vor allem über den umgebenden Text verstehen.

Richtig & falsch im Code

<!-- Falsch: kein alt – Screenreader lesen ersatzweise den Dateinamen -->
<img src="team-0234-final-v2.jpg" />

<!-- Falsch: Deko-Bild mit alt-Text – erzeugt Lärm ohne Gegenwert -->
<img src="zierlinie.svg" alt="Dekorative Linie" />

<!-- Falsch: Motiv beschrieben statt Aussage transportiert -->
<img src="umsatz-2026.svg" alt="Balkendiagramm mit vier blauen Balken" />

<!-- Richtig: informatives Bild mit der Information, um die es geht -->
<img src="umsatz-2026.svg"
     alt="Umsatz 2023 bis 2026: Anstieg von 2,1 auf 4,2 Mio. Euro" />

<!-- Richtig: dekoratives Bild wird übersprungen -->
<img src="zierlinie.svg" alt="" />

<!-- Richtig: funktionales Icon – benannt nach der Funktion -->
<button type="submit">
  <svg aria-hidden="true" focusable="false"><!-- Lupen-Pfad --></svg>
  <span class="visually-hidden">Suchen</span>
</button>

Ein Muster, das oft übersehen wird: Bild und Text im selben Link. Steht neben dem Produktfoto der Produktname und beides zeigt auf dieselbe Seite, dann ist das Bild redundant und bekommt alt="". Sonst hört man den Namen zweimal.

<!-- Richtig: der Text trägt den Namen, das Bild schweigt -->
<a href="/produkte/kaffeemuehle.html">
  <img src="kaffeemuehle.webp" alt="" />
  <span>Handkaffeemühle Modell C40</span>
</a>

Wie man gute Alternativtexte formuliert – Länge, Satzbau, Umgang mit Text im Bild –, behandelt ausführlich Alt-Texte richtig schreiben. Für Icons und Inline-SVG gibt es eigene Muster, für Diagramme gestufte Alternativen bis hin zur Datentabelle.

So testest du es

1. Automatisch vorsortieren: axe, WAVE oder Lighthouse finden fehlende alt-Attribute und leere Bild-Links zuverlässig. Das ist die Grobsortierung, nicht die Prüfung.
2. Jedes Bild einzeln einordnen: informativ, funktional oder dekorativ? Diese Frage lässt sich nicht automatisieren – und sie ist die eigentliche Arbeit.
3. Screenreader-Gegenprobe: Mit NVDA (NVDA + G springt von Grafik zu Grafik) oder VoiceOver über die Seite gehen: Kommt die Information verständlich an? Bleibt Deko stumm?
4. Bilder abschalten: In den Browser-Einstellungen Bilder deaktivieren und die Seite neu laden – geht Information verloren, fehlt eine Alternative.
5. Die Vorlese-Probe: Alt-Text laut vorlesen, ohne das Bild anzusehen. Ergibt der Satz allein Sinn, passt er.

Bei Zweifelsfällen führt die Alt-Text-Entscheidungshilfe in drei Fragen zur richtigen Einordnung – inklusive Prüffeld für einen fertigen Entwurf.

Häufiger Fehler in der Praxis

Fehlende Alt-Texte findet jedes Tool. Der eigentliche Klassiker sind Alt-Texte, die es zu gut meinen. Redaktionssysteme verlangen ein Pflichtfeld, also wird eines gefüllt: „Bild“, „Grafik zum Artikel“, „Foto: Mustermann“, oder der komplette Bildunterschrift-Text noch einmal. Ergebnis: Die Seite besteht jeden automatischen Test und ist im Screenreader trotzdem eine Zumutung.

Der zweite Dauerbrenner sind Icon-Buttons ohne Namen. In modernen Oberflächen sind halbe Werkzeugleisten nur Symbole – Stift, Papierkorb, Herz. Optisch elegant, in der Ausgabe sechsmal „Schalter“. Geh mit dem Accessibility-Panel der DevTools einmal gezielt über die Buttons drüber; da fällt das in zwei Minuten auf.

Und der dritte: Text im Bild. Eine Infografik mit 200 Wörtern Text bekommt ein alt mit 200 Wörtern – oder, häufiger, eines mit acht. Beides geht daneben. Hier brauchst du eine lange Beschreibung im Fließtext; und meistens ist die bessere Antwort ohnehin, den Text aus dem Bild herauszuholen (1.4.5 Bilder von Text).

Häufige Fragen

Muss ich bei jedem Bild ein alt-Attribut setzen?

Ja – das Attribut selbst ist immer Pflicht, auch bei Deko. Der Unterschied liegt im Wert: informative und funktionale Bilder bekommen einen Text, dekorative das leere alt="". Fehlt das Attribut ganz, behelfen sich Screenreader mit dem Dateinamen oder der URL, und das ist regelmäßig schlimmer als gar keine Ansage.

Wie lang darf ein Alt-Text sein?

Die WCAG nennt keine Obergrenze. In der Praxis haben sich rund 80 bis 125 Zeichen eingebürgert – so weit trägt ein Satz, den man am Stück hört. Braucht ein Bild mehr, gehört die ausführliche Erklärung sichtbar auf die Seite: als Bildunterschrift, Absatz oder Datentabelle. Der Alt-Text verweist dann nur noch kurz darauf.

Gilt 1.1.1 auch für Hintergrundbilder aus CSS?

Für reine Zierde nein – ein CSS-Hintergrund ist für assistive Technologien ohnehin nicht vorhanden, und genau das ist bei Deko erwünscht. Sobald ein Hintergrundbild aber Information vermittelt (ein Statussymbol, ein Diagramm, ein Textbild), fällt es unter 1.1.1 und braucht eine Alternative im Markup – dann gehört es meist ohnehin ins HTML statt ins Stylesheet.

Reicht der Dateiname als Alternative, wenn er sprechend ist?

Nein. Auch handkaffeemuehle-c40-schwarz.webp wird als Zeichenkette vorgelesen, mit Bindestrichen und Dateiendung. Sprechende Dateinamen sind gut für Bild-SEO, ersetzen aber keine Textalternative.

Wie prüft der BITV-Test dieses Kriterium?

Der BITV-Test zerlegt 1.1.1 in vier Prüfschritte: 1.1.1a für Alternativtexte von Bedienelementen, 1.1.1b für Grafiken und Objekte, 1.1.1c für leere alt-Attribute bei Layoutgrafiken und 1.1.1d für CAPTCHA-Alternativen. Jeder wird einzeln bewertet – eine Seite kann also bei Bedienelementen bestehen und bei Grafiken durchfallen. Details stehen in der Prüfschritt-Dokumentation des BIK BITV-Tests.

Verwandte Themen

• Alt-Texte richtig schreiben – die Formulierungs-Anleitung mit Beispielsätzen
• Icons & SVGs und barrierefreie Diagramme – die zwei häufigsten Sonderfälle
• 1.4.5 Bilder von Text – wenn Text im Bild steckt
• 4.1.2 Name, Rolle, Wert – der zugängliche Name jenseits von Bildern
• Bild-SEO – dieselbe Arbeit, zweiter Gewinn