Alt-Texte richtig schreiben: Beispiele und Entscheidungsregeln

Was gehört in einen guten Alt-Text?

Kurzantwort: Ein Alt-Text vermittelt die Information oder Funktion, die ein Bild im konkreten Kontext erfüllt. Er beschreibt nicht automatisch jedes sichtbare Detail. Dekorative Bilder erhalten alt=""; funktionale Bilder benennen die Aktion; komplexe Grafiken brauchen zusätzlich eine ausführliche Textalternative.

Auf einen Blick:

• Leitfrage: Nicht „Was ist auf dem Bild?“, sondern „Was würde fehlen, wenn das Bild nicht verfügbar wäre?“
• Dekorativ: immer alt="" setzen, das Attribut nie ganz weglassen.
• Funktional: Alt-Text benennt Ziel oder Aktion („Seite drucken“), nicht das Motiv.
• Diagramme: kurzer Alt-Text mit der Kernaussage, vollständige Werte in figcaption oder Tabelle.
• Länge: ein bis zwei Sätze. Die 125 Zeichen sind eine Faustregel, keine WCAG-Vorgabe.
• Kein „Bild von“ voranstellen: der Screenreader kündigt die Rolle bereits an.
• Keine Keywords stopfen: Google wertet das als Spam-Signal – mehr dazu unter Barrierefreiheit und SEO.

Die erste Frage lautet deshalb nicht „Was ist auf dem Bild?“, sondern „Was würde fehlen, wenn das Bild nicht verfügbar wäre?“ Die interaktive Alt-Text-Entscheidungshilfe führt durch diese Einordnung.

Informative Bilder

Ein informatives Bild vermittelt etwas, das der umgebende Text nicht vollständig enthält.

<img src="eingang.jpg" alt="Stufenloser Eingang an der rechten Gebäudeseite">

Der Alt-Text konzentriert sich hier auf die für den Kontext relevante Zugänglichkeit. Formulierungen wie „Bild von“ sind meist überflüssig, weil der Screenreader die Rolle bereits ankündigt.

Dekorative Bilder

Ornamente, Abstandhalter oder Bilder, deren Inhalt unmittelbar daneben vollständig wiederholt wird, sollten assistive Technologien überspringen:

<img src="welle.svg" alt="">

Lassen Sie das alt-Attribut nicht weg. Ohne Attribut lesen Screenreader je nach Situation den Dateinamen vor. Bei CSS-Hintergrundbildern ist keine zusätzliche Auszeichnung nötig, solange sie keine Information vermitteln.

Funktionale Bilder und verlinkte Logos

Bei Bildern in Links oder Schaltern beschreibt der Alt-Text das Ziel beziehungsweise die Aktion:

<button type="button">
  <img src="drucker.svg" alt="Seite drucken">
</button>

Enthält der Button zusätzlich sichtbaren Text „Seite drucken“, wäre das Bild dekorativ und bekäme alt="". Sonst würde der zugängliche Name doppelt vorgelesen.

Bei einem zur Startseite verlinkten Logo reicht in der Regel der Organisationsname. „Logo“ ist nur wichtig, wenn die Eigenschaft selbst relevant ist.

Text im Bild

Vermeiden Sie Bilder von Text, wenn echter HTML-Text möglich ist. Bei einem Logo übernimmt der Alt-Text den Namen. Bei einem Plakat oder Screenshot mit viel Text ist ein langer Alt-Text unhandlich; stellen Sie den vollständigen Inhalt zusätzlich als strukturierten Text bereit.

Diagramme und Infografiken

Ein kurzer Alt-Text identifiziert Kernaussage und Zweck. Die vollständigen Werte gehören in eine Tabelle oder ausführliche Beschreibung:

<figure>
  <img src="trend.png" alt="Die Fehlerzahl sinkt in drei Prüfungen kontinuierlich" aria-describedby="trend-details">
  <figcaption id="trend-details">
    Prüfung 1: 24 Fehler. Prüfung 2: 11 Fehler. Prüfung 3: 4 Fehler.
  </figcaption>
</figure>

Verstecken Sie wichtige Daten nicht ausschließlich in einem Bild. Eine echte HTML-Tabelle lässt sich vergrößern, kopieren und strukturiert navigieren.

Häufige Fehler

• Dateinamen wie IMG_4821.jpg werden als Alt-Text verwendet.
• Jeder Alt-Text beginnt mit „Bild von“.
• Suchbegriffe werden ohne inhaltlichen Nutzen aneinandergereiht.
• Sichtbare Bildunterschrift und Alt-Text wiederholen sich vollständig.
• Dekorative Bilder erhalten ausführliche Beschreibungen.
• Ein komplexes Diagramm bekommt nur „Statistik“ als Alternative.

Manueller Test

1. Blenden Sie Bilder gedanklich oder technisch aus.
2. Lesen Sie Alt-Text und umgebenden Text gemeinsam.
3. Prüfen Sie, ob dieselbe Information oder Funktion erhalten bleibt.
4. Kontrollieren Sie, ob Wiederholungen entstehen.
5. Navigieren Sie mit einem Screenreader durch Bilder und verlinkte Grafiken. Der Leitfaden zum Screenreader-Test zeigt, wie Sie dabei vorgehen.

Automatische Scanner finden fehlende Attribute, können aber die Qualität nur sehr begrenzt beurteilen. Wie sich automatische und manuelle Prüfungen sinnvoll ergänzen, erklärt der Überblick zum Barrierefreiheit-Testen.

Häufige Fragen

Wie lang darf ein Alt-Text sein?

WCAG nennt keine Zeichengrenze. Die oft zitierten 125 Zeichen sind eine Faustregel aus dem Verhalten älterer Screenreader, keine normative Anforderung. Halten Sie sich an einen bis zwei Sätze. Wenn mehr Information nötig ist, gehört sie in eine Bildunterschrift, eine Tabelle oder eine ausführliche Beschreibung, nicht in das alt-Attribut.

Brauchen dekorative Bilder einen Alt-Text?

Sie brauchen ein leeres alt="", aber keinen Text. Damit überspringen assistive Technologien das Bild gezielt. Lassen Sie das Attribut nicht ganz weg: ohne alt lesen manche Screenreader den Dateinamen vor, und das stört deutlich mehr als Stille.

Was ist der Unterschied zwischen Alt-Text und Bildunterschrift?

Der Alt-Text ersetzt das Bild für Menschen, die es nicht sehen können. Eine Bildunterschrift steht für alle sichtbar daneben und ergänzt das Bild. Beide sollten sich nicht vollständig wiederholen – steht die Kernaussage schon in der Unterschrift, ist das Bild in der Regel dekorativ.

Ist ein fehlender Alt-Text ein Verstoß gegen das BFSG?

Fehlende Textalternativen verletzen WCAG 1.1.1, also das niedrigste Level A. Das BFSG referenziert die EN 301 549, in der Praxis ist damit WCAG 2.1 Level AA der Maßstab. Ein automatischer Scan findet fehlende Attribute zuverlässig, ob ein vorhandener Alt-Text inhaltlich taugt, beurteilt er nicht. Diese Bewertung leistet ein manuelles WCAG-Audit.

Quellen

• W3C WAI: Images Tutorial
• W3C WAI: Alt Decision Tree
• WCAG 2.2: Non-text Content

Stand: 7. August 2026.