Standards · WCAG 2.2

SC 1.1.1 Stufe A WCAG 2.0

Nichttextlicher Inhalt

Jedes Bild, Symbol, Diagramm, jede Audiodatei und jeder sonstige nichttextliche Inhalt muss eine Textalternative haben, die denselben Zweck erfüllt — damit Screenreader-, Braille- und Eingabehilfe-Nutzende dieselben Informationen erhalten wie sehende Nutzende.

Was gefordert wird

Nichttextliche Inhalte — Bilder, Symbole, Diagramme, Animationen, CAPTCHAs, eingebettete Audiodateien, sensorische Erlebnisse — müssen eine Textalternative enthalten, die dieselben Informationen oder Funktionen vermittelt. Die Textalternative ist das, was eine assistive Technologie der nutzenden Person wiedergibt, wenn das Original nicht wahrgenommen werden kann.

Die vier Kategorien, die WCAG benennt:

  • Informative Bilder benötigen einen Alternativtext, der die vermittelten Informationen beschreibt.
  • Funktionale Bilder (Links, Schaltflächen) benötigen einen Alternativtext, der die Aktion beschreibt — nicht das visuelle Erscheinungsbild.
  • Dekorative Bilder erhalten ein leeres alt-Attribut (alt=""), damit Screenreader sie überspringen.
  • Komplexe Bilder (Diagramme, Schaubilder) benötigen einen kurzen Alternativtext sowie eine ausführlichere Beschreibung im Text selbst, in einem <details>-Block oder über aria-describedby.

So wird die Anforderung erfüllt

  • Jedes <img>-Element erhält ein alt-Attribut. Leer bei dekorativen Bildern, beschreibend bei informativen.
  • Jeder Symbol-only-<button> erhält einen zugänglichen Namen über aria-label, sichtbaren Text oder einen SVG-<title>.
  • Bei Diagrammen und Infografiken: einen kurzen zusammenfassenden Alternativtext verfassen und die Daten in einer zugänglichen Tabelle unmittelbar vor oder nach der Abbildung bereitstellen.
  • Bei CAPTCHAs mindestens eine nicht-visuelle Alternative anbieten (Audio-CAPTCHA, E-Mail-Verifizierung, serverseitiges Rate-Limiting).
  • Für Audio, das Informationen enthält (Podcast-Vorschau, UI-Sound), eine Textentsprechung bereitstellen.

Häufige Fehler

  • alt="image" oder alt="Bild einer Person" — beschreibt das Medium, nicht den Inhalt.
  • Symbol-only-Schaltflächen ohne zugänglichen Namen (<button><svg /></button>). Screenreader lesen lediglich „Schaltfläche“ vor, ohne weiteren Kontext.
  • Dekorative Bilder ohne alt="" — Screenreader lesen ersatzweise den Dateinamen vor.
  • <img>-Elemente für Diagramme, bei denen nur der Diagrammtitel als Alternativtext angegeben ist, die zugrundeliegenden Daten aber nirgends auf der Seite stehen.
  • CSS-Hintergrundbilder mit inhaltlicher Bedeutung, für die es kein Textetikett im Markup gibt.

Warum es wichtig ist

Dies ist das Fundament der Screenreader-Barrierefreiheit. Eine Website, die 1.1.1 nicht erfüllt, ist für blinde Nutzende unbrauchbar — jedes Bild wird zu einer Sackgasse. Es handelt sich zudem um den am häufigsten von axe und Lighthouse erkannten Fehler, da automatisierte Werkzeuge fehlende Alternativtexte zuverlässig markieren können — allerdings nicht beurteilen können, ob ein vorhandener Alternativtext inhaltlich sinnvoll ist.