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.

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

Blenden Sie Bilder gedanklich oder technisch aus.
Lesen Sie Alt-Text und umgebenden Text gemeinsam.
Prüfen Sie, ob dieselbe Information oder Funktion erhalten bleibt.
Kontrollieren Sie, ob Wiederholungen entstehen.
Navigieren Sie mit einem Screenreader durch Bilder und verlinkte Grafiken.

Automatische Scanner finden fehlende Attribute, können aber die Qualität nur sehr begrenzt beurteilen.

Quellen

Stand: 7. August 2026.