WCAG 2.2 · Level A · WahrnehmbarBarrierefreiheit als Cloud-Service

1.1.1 Nicht-Text-Inhalt

Alles, was auf einer Website nicht Text ist — Bilder, Grafiken, Icons, Diagramme, Videos, Audioaufnahmen — muss mit einem Text beschrieben werden. Nur so können blinde Menschen, die einen Screenreader nutzen, verstehen, was da zu sehen ist.

Jetzt testen Alle Kriterien

Auf einen Blick

Was bedeutet dieses Kriterium?

Kurz gesagt

Bilder brauchen eine Beschreibung

Aufwand

Einfach umzusetzen, schnell erledigt

Betrifft Rolle

Redaktion, Entwicklung

Konformitätsstufe

Level A

EN 301 549

Abschnitt 9.1.1.1 · BITV 2.0 · BFSG

Verständlich erklärt

Was heißt 1.1.1 für die Praxis?

Der Beschreibungstext heißt bei Bildern 'Alt-Text' (kurz für Alternativtext). Er wird für Menschen, die das Bild sehen, unsichtbar im Code hinterlegt — aber Screenreader lesen ihn laut vor.

Wichtig: Nicht jedes Bild braucht eine ausführliche Beschreibung. Rein dekorative Bilder sollten explizit als 'leer' markiert werden, damit der Screenreader sie überspringt.

Wer ist betroffen?

Ein Alltagsbeispiel

Thomas ist von Geburt an blind. Er möchte einen Online-Shop nach einem bestimmten Kopfhörer durchsuchen. Die Produktfotos haben keinen Alt-Text — für seinen Screenreader sind sie komplett unsichtbar. Er hört nur 'Bild, Bild, Bild' statt 'Sony WH-1000XM5 in Schwarz'. Ohne aussagekräftige Beschreibungen kann er die Produkte nicht unterscheiden, nicht vergleichen, nicht auswählen.

Betroffen sind insbesondere: Blinde Menschen, Sehbehinderte Menschen, Menschen mit langsamer Internetverbindung, Suchmaschinen.

Die Lösung

So setzen Sie es richtig um

Jedes Bild bekommt ein alt-Attribut. Der Alt-Text beschreibt, was auf dem Bild zu sehen ist oder welchen Zweck es erfüllt — nicht wie es aussieht.

Die Faustregel: Stellen Sie sich vor, Sie telefonieren mit jemandem und beschreiben die Webseite. Was würden Sie über dieses Bild sagen? Das ist Ihr Alt-Text. Bei rein dekorativen Bildern (Trennlinien, Hintergrund-Grafiken) verwenden Sie ein leeres alt-Attribut: alt="". Damit weiß der Screenreader: Dieses Bild enthält keine wichtige Information — überspringe es.

Umsetzung

Schritt für Schritt

Konkrete Anleitung zur praktischen Umsetzung dieses Kriteriums.

1
Alle Bilder auf der Seite inventarisieren
Gehen Sie durch Ihre Seite und notieren Sie: welche <img>-Elemente gibt es? Welche SVG-Grafiken? Welche Icons? Welche Hintergrundbilder in CSS (die brauchen keinen Alt-Text, aber sollten auch keine wichtigen Informationen enthalten)?
2
Zweck jedes Bildes bestimmen
Fragen Sie sich bei jedem Bild: Ist das informativ (zeigt wichtigen Inhalt), dekorativ (nur Gestaltung) oder funktional (z.B. ein Icon in einem Button)? Je nach Antwort brauchen Sie eine andere Art von Alt-Text.
3
Alt-Text formulieren
Informative Bilder: beschreiben Sie den Inhalt. 'Balkendiagramm: Umsatz stieg um 23% von Q1 auf Q4.' Dekorative Bilder: leeres alt-Attribut (alt=""). Funktionale Bilder (z.B. Such-Icon in einem Button): beschreiben Sie die Aktion, nicht das Bild. 'Suchen' statt 'Lupe'.
4
CAPTCHAs und komplexe Grafiken prüfen
Visuelle CAPTCHAs (z.B. 'Wählen Sie alle Ampeln') brauchen eine Alternative — etwa ein Audio-CAPTCHA. Komplexe Diagramme (z.B. Organigramme) brauchen entweder einen ausführlichen Text direkt daneben oder einen Link zu einer Textversion.
5
Mit einem Screenreader prüfen
Schalten Sie VoiceOver oder NVDA ein und navigieren Sie durch Ihre Seite. Wird jedes Bild sinnvoll vorgelesen? Oder hören Sie nur 'Bild' ohne weitere Information? Letzteres ist ein Problem.

Praxisbeispiele

So nicht — sondern so

So nicht

<img src="chart.png">

Sondern so

<img src="chart.png" alt="Balkendiagramm: Umsatz stieg von 120.000 € in Q1 auf 165.000 € in Q4 2025 (+37%)">

Warum?

Das erste Bild ist für Screenreader-Nutzer unsichtbar. Sie wissen nicht einmal, dass hier ein Diagramm ist. Im zweiten Beispiel vermittelt der Alt-Text nicht nur, dass es ein Diagramm gibt, sondern auch die zentrale Information — das Wachstum. Das ist besser als jede Grafik.

So nicht

<img src="divider.png" alt="Trennlinie">

Sondern so

<img src="divider.png" alt="">

Warum?

Eine dekorative Trennlinie hat keine Bedeutung für den Nutzer. Ein Screenreader, der 'Trennlinie' vorliest, ist nur störend. Das leere alt-Attribut (alt="") signalisiert: Dieses Bild ist rein dekorativ, bitte überspringen. Wichtig: das alt-Attribut darf nicht fehlen — es muss leer sein. Ohne alt-Attribut liest der Screenreader den Dateinamen vor.

Typische Fehler

Das wird häufig falsch gemacht

Diese Fehler sehen wir in der Praxis besonders oft — und wie Sie sie vermeiden.

Dateiname als Alt-Text

Wenn Sie das alt-Attribut vergessen, lesen manche Screenreader den Dateinamen vor. 'IMG_20240315_184532.jpg' ist keine hilfreiche Beschreibung. Setzen Sie immer ein alt-Attribut — auch wenn es leer ist.

'Bild von' oder 'Grafik zeigt' im Alt-Text

Screenreader sagen bereits 'Bild' bevor sie den Alt-Text vorlesen. 'Bild von einem Hund' wird zu 'Bild Bild von einem Hund'. Schreiben Sie einfach 'Golden Retriever im Park'.

Alt-Text beschreibt das Aussehen statt den Zweck

Ein Such-Icon in einem Button sollte nicht 'Lupe' heißen, sondern 'Suchen'. Der Alt-Text soll vermitteln, was das Bild bedeutet oder tut, nicht wie es visuell aussieht.

Ausführlicher Alt-Text bei dekorativen Bildern

Dekorative Bilder haben keine Bedeutung — sie brauchen kein alt="Eleganter weicher Farbverlauf im Hintergrund". Sie brauchen alt="".

Selbst prüfen

So testen Sie dieses Kriterium

Mit diesen Methoden können Sie selbst prüfen, ob Ihre Webseite das Kriterium erfüllt.

CSS deaktivieren

Wenn Sie die Stile ausschalten, sehen Sie die Seite nur als strukturierten Text. Bilder werden durch ihren Alt-Text ersetzt. Ergibt die Seite noch Sinn? Falls nicht, fehlen wichtige Alt-Texte.

Screenreader-Navigation nach Bildern

Mit VoiceOver (Mac) können Sie per Rotor direkt zu allen Bildern navigieren. Hören Sie sich jedes Bild an. Ist die Beschreibung aussagekräftig?

Automatisierte Prüfung

Tools wie Pa11y, axe oder WAVE finden fehlende alt-Attribute zuverlässig. Sie können aber nicht beurteilen, ob ein Alt-Text inhaltlich sinnvoll ist — das müssen Sie manuell prüfen.

Häufige Fragen

Fragen und Antworten

Wie lang darf ein Alt-Text sein?▾

Es gibt kein festes Limit, aber 125 Zeichen sind eine gute Richtlinie. Für sehr komplexe Bilder (Diagramme, Infografiken) nutzen Sie zwei Elemente: ein kurzes alt-Attribut und eine ausführliche Beschreibung im Fließtext oder per aria-describedby.

Brauchen Bilder in einem <figure>-Element trotzdem ein alt-Attribut?▾

Ja. Die <figcaption> beschreibt das Bild im Kontext der Seite, aber das alt-Attribut erklärt das Bild selbst. Beides ergänzt sich: alt-Attribut kurz und sachlich, figcaption mit Bezug zum Artikel.

Was ist mit SVG-Grafiken?▾

SVGs brauchen entweder ein <title>-Element innerhalb der SVG, oder aria-label, oder role="img" mit aria-label. Dekorative SVGs bekommen aria-hidden="true", damit sie von Screenreadern ignoriert werden.

Was ist mit CSS-Hintergrundbildern?▾

Hintergrundbilder in CSS (background-image) sollten keine wichtigen Informationen enthalten — sie sind für Screenreader unsichtbar. Wenn ein Bild wichtig ist, muss es als <img> im HTML stehen.

Muss ich Bilder in verlinkten PDFs auch beschreiben?▾

Ja. PDF-Dokumente müssen genauso barrierefrei sein wie Webseiten. Bilder im PDF bekommen alternative Texte, und Tabellen bekommen Zeilen- und Spaltenüberschriften.

Verwandte Kriterien

Weiterführende Erfolgskriterien

Diese Kriterien stehen in engem Zusammenhang mit 1.1.1 und sollten gemeinsam betrachtet werden.

1.4.5AA

Bilder von Text

Echten Text statt Bilder von Text verwenden.

1.4.9AAA

Bilder von Text (keine Ausnahme)

Bilder von Text nur für Logos — sonst immer echten Text.