Barrierefreiheit6 MinutenAktualisiert am 28.01.2026
Alternativtexte schreiben, die tatsächlich helfen
Wann ein Bild einen Alternativtext braucht, wann alt="" richtig ist und wie man in einem Satz das Wesentliche unterbringt.
Fehlende Alternativtexte sind der mit Abstand häufigste Befund bei automatisierten Barrierefreiheitsprüfungen. Das Attribut selbst ist trivial – die Schwierigkeit liegt darin, den richtigen Text zu formulieren.
Die Grundregel
Frage dich: Welche Information geht verloren, wenn das Bild nicht angezeigt wird? Genau diese Information gehört in den Alternativtext – nicht mehr und nicht weniger.
| Art des Bildes | Richtige Behandlung |
|---|---|
| Informativ (Produktfoto, Diagramm, Porträt) | Beschreibender Alternativtext, ein bis zwei Sätze |
| Dekorativ (Trennlinie, Hintergrundmuster, Schmuckbild) | Leeres alt="" – der Screenreader überspringt es |
| Funktional (Bild in einem Link oder Button) | Beschreibe die Funktion, nicht das Aussehen: „Startseite“ statt „Logo“ |
| Text im Bild (Zitatgrafik, Angebotsbanner) | Den kompletten Text wiederholen |
| Komplexes Diagramm | Kurzer Alternativtext plus ausführliche Beschreibung im Fließtext daneben |
Vorher und nachher
<!-- Kein alt: Screenreader liest den Dateinamen vor -->
<img src="IMG_2043.jpg">
<!-- Alt ohne Informationswert -->
<img src="IMG_2043.jpg" alt="Bild">
<!-- Überflüssige Einleitung: "Grafik" sagt der Screenreader selbst -->
<img src="IMG_2043.jpg" alt="Bild von einem Handwerker">
<!-- Gut: konkret, knapp, im Kontext sinnvoll -->
<img src="IMG_2043.jpg"
alt="Monteur befestigt ein Solarmodul auf einem Ziegeldach">
<!-- Dekoratives Trennelement: bewusst leer -->
<img src="divider.svg" alt="">
<!-- Funktional: die Funktion beschreiben, nicht das Motiv -->
<a href="/"><img src="logo.svg" alt="Zur Startseite"></a>Drei Faustregeln
- Kein „Bild von“ oder „Grafik zeigt“ – Screenreader kündigen die Bildnatur ohnehin an.
- Punkt am Ende setzen. Ohne ihn liest die Sprachausgabe direkt weiter in den Folgetext.
- Kontext beachten: Dasselbe Foto braucht auf einer Teamseite („Anna Meier, Geschäftsführerin“) einen anderen Text als in einem Bericht („Vier Personen diskutieren an einem Whiteboard“).
Der Test
Lies deinen Text jemandem am Telefon vor, ohne das Bild zu zeigen. Versteht die Person, worum es geht? Dann passt der Alternativtext.
Sonderfall Inline-SVG
<!-- Dekoratives Symbol neben einem Text: ausblenden -->
<button>
<svg aria-hidden="true" focusable="false"><use href="#icon-save"/></svg>
Speichern
</button>
<!-- Symbol ohne begleitenden Text: benennen -->
<button aria-label="Speichern">
<svg aria-hidden="true" focusable="false"><use href="#icon-save"/></svg>
</button>