Alt-Text schreiben: Anleitung mit Beispielen für WCAG-Konformität

Alt-Texte sind eine der häufigsten Barrieren im Web — und gleichzeitig eine der einfachsten zu beheben. Nach WCAG 1.1.1 (Non-text Content) müssen alle nicht-textuellen Inhalte eine Textalternative haben. Dieser Artikel zeigt, wie Sie Alt-Texte schreiben, die wirklich funktionieren — für Screenreader-Nutzer, für Google und für BFSG-Compliance.

Was ist ein Alt-Text und warum ist er wichtig?

Ein Alt-Text (alternatives Attribut) ist der Text, der angezeigt wird, wenn ein Bild nicht geladen werden kann — und den Screenreader vorlesen, wenn ein blinder oder sehbeeinträchtigter Nutzer die Seite besucht. Er ist im HTML-Code als Attribut des <img>-Tags hinterlegt:

<img src="team-foto.jpg" alt="Das EAA Checker Team bei einem Workshop in Berlin" />

Screenreader wie NVDA, JAWS oder VoiceOver lesen diesen Text wörtlich vor. Fehlt der Alt-Text oder ist er schlecht geschrieben, verlieren blinde Nutzer wichtige Informationen — oder werden mit Dateinamen wie "img-1234.jpg" bombardiert.

WCAG 1.1.1: Die Anforderung

WCAG 1.1.1 (Level A — die niedrigste Konformitätsstufe) fordert: Alle nicht-textuellen Inhalte müssen eine Textalternative haben, die denselben Zweck erfüllt. Das gilt für:

• Fotos und Illustrationen
• Icons und Symbole
• Diagramme und Infografiken
• Buttons mit Icon (ohne Text)
• CAPTCHAs (mit Audio-Alternative)
• Video-Thumbnails

Die Grundregeln für gute Alt-Texte

Gute vs. schlechte Alt-Texte: 6 Beispiele

Sonderfälle: Wann kein Alt-Text nötig ist

Dekorative Bilder

Bilder, die rein ästhetischen Zwecken dienen und keine Information transportieren, brauchen keinen beschreibenden Alt-Text — aber sie brauchen ein leeres alt-Attribut:

<!-- Dekoratives Trennbild -->
<img src="wave-divider.svg" alt="" role="presentation" />

<!-- FALSCH: fehlendes alt-Attribut -->
<img src="wave-divider.svg" />

Icons neben Text

Wenn ein Icon direkt neben seinem Textlabel steht ("🔍 Suchen"), ist das Icon redundant. Nutzen Sie alt="" um es zu verstecken:

<button>
  <img src="search-icon.svg" alt="" />
  Suchen
</button>

Icon-Buttons ohne Text

Wenn ein Button nur aus einem Icon besteht (kein sichtbarer Text), verwenden Sie aria-label auf dem Button — nicht auf dem Bild:

<!-- Korrekt: aria-label auf dem Button -->
<button aria-label="Suche öffnen">
  <svg aria-hidden="true" ...>...</svg>
</button>

<!-- Auch korrekt: alt-Text auf dem Bild -->
<button>
  <img src="search.svg" alt="Suche öffnen" />
</button>

Komplexe Bilder: Diagramme und Infografiken

Für Diagramme reicht ein kurzer Alt-Text nicht aus — die Daten müssen vollständig zugänglich sein. Nutzen Sie eine der folgenden Methoden:

<!-- Methode 1: Beschreibung im umgebenden Text -->
<figure>
  <img src="chart.png" alt="Balkendiagramm Umsatz 2024 (Details im Text)" />
  <figcaption>
    Umsatz Q1: 45.000 €, Q2: 52.000 €, Q3: 61.000 €, Q4: 78.000 €
  </figcaption>
</figure>

<!-- Methode 2: aria-describedby -->
<img src="chart.png" alt="Umsatzentwicklung 2024" aria-describedby="chart-desc" />
<p id="chart-desc" class="sr-only">
  Quartalsumsätze: Q1 45.000, Q2 52.000, Q3 61.000, Q4 78.000 Euro.
  Wachstum von 73% im Jahresverlauf.
</p>

Alt-Texte im CMS verwalten

In den meisten CMS-Systemen gibt es ein Feld für den Alt-Text:

• WordPress: "Alternativtext" in der Mediathek beim Bild-Upload
• Shopify: "Alt text" in der Bildverwaltung und beim Produkt-Bild-Upload
• Squarespace: "Image Description" in den Bild-Einstellungen
• Typo3: "Alternativtext" im Media-Modul

Wichtig: Dekorative Bilder im CMS erfordern ein explizit leeres Feld — nicht einfach das Feld leer lassen (manche CMS ergänzen dann den Dateinamen automatisch).

Alt-Texte automatisch prüfen

Automatisierte Tools können prüfen, ob Alt-Texte vorhanden sind — aber nicht ob sie gut sind. Das bleibt menschliche Aufgabe. Dennoch helfen Tools:

• EAA Checker: Zeigt alle Bilder ohne Alt-Text als kritischen Fehler an — mit direktem Link zum betroffenen Element
• axe DevTools: Browser-Extension, hebt fehlende/leere Alt-Texte hervor
• WAVE: Visualisiert Alt-Texte direkt auf der Seite

Lesen Sie mehr dazu im Artikel Barrierefreiheit testen: Die besten Tools im Vergleich.