Alt-Texte für Bilder ergänzen

WCAG 1.1.1 · leicht · etwa 30 Minuten · Stand 08.11.2026

Worum es geht

Bilder, Icons und Grafiken sind für Menschen, die sie nicht sehen, nur dann nutzbar, wenn es eine Textalternative gibt. In HTML ist das meist das alt-Attribut. Fehlt es, liest ein Screenreader oft den Dateinamen vor, zum Beispiel "IMG underscore 4711 punkt jpg". WCAG verlangt, dass jeder Nicht-Text-Inhalt eine Textalternative hat, die denselben Zweck erfüllt. Rein dekorative Bilder sollen dagegen so ausgezeichnet werden, dass assistive Technik sie überspringen kann.

Wen es betrifft

Blinde Menschen, die einen Screenreader wie NVDA, JAWS oder VoiceOver nutzen. Der Screenreader liest den Alt-Text an der Stelle des Bildes vor.
Menschen mit Sehbehinderung, die Bilder nur schwer erkennen.
Alle, bei denen Bilder nicht laden, etwa bei schlechter Verbindung. Dann zeigt der Browser den Alt-Text an.
Menschen, die sich Seiten per Sprachausgabe vorlesen lassen.

So behebst du es

Finde heraus, welche Art Bild du vor dir hast. Der W3C-Entscheidungsbaum hilft dabei: Trägt das Bild Information, ist es ein Link oder Button, oder ist es nur Schmuck?
Informative Bilder: beschreibe, was wichtig ist. Für ein Produktfoto beschreibst du das, was Kundinnen und Kunden zum Kauf wissen müssen, nicht jedes Pixel. Wörter wie "Bild von" kannst du weglassen, der Screenreader sagt ohnehin, dass es ein Bild ist.

Schlecht:
```
<img src="IMG_4711.jpg">
<img src="tasse.jpg" alt="Bild">
```
Gut:
```
<img src="tasse.jpg" alt="Steingut-Tasse in Mattblau mit hellem Rand, 300 ml">
```
Dekorative Bilder: leeres alt-Attribut. Schmuckelemente, Trennlinien oder Bilder, deren Inhalt schon im Text daneben steht, bekommen alt="". Lass das Attribut nicht ganz weg, sonst liest der Screenreader eventuell den Dateinamen vor.
```
<img src="ornament.svg" alt="">
```
Noch besser: reine Schmuckgrafiken per CSS als Hintergrund einbinden.
Bilder in Links und Buttons: beschreibe die Funktion. Ist das Bild der einzige Inhalt eines Links, sagt der Alt-Text, wohin der Link führt oder was passiert.

Schlecht:
```
<a href="/warenkorb"><img src="korb.svg" alt="Korb-Icon"></a>
```
Gut:
```
<a href="/warenkorb"><img src="korb.svg" alt="Warenkorb"></a>
```
Beim Logo, das zur Startseite führt, reicht oft der Shopname, etwa alt="Kaffeerösterei Muster, zur Startseite".
Bildbuttons im Formular: <input type="image"> braucht ebenfalls ein alt.
```
<input type="image" src="lupe.svg" alt="Suchen">
```

Inline-SVGs: Gib dem SVG eine Rolle und einen Namen, oder verstecke es, wenn es dekorativ ist.

<!-- informativ -->
<svg role="img" aria-labelledby="bio-titel" viewBox="0 0 24 24">
  <title id="bio-titel">Bio-zertifiziert</title>
  <path d="..."/>
</svg>

<!-- dekorativ, Text steht daneben -->
<button type="button">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="..."/></svg>
  Merken
</button>

Komplexe Bilder wie Größentabellen als Grafik oder Diagramme: Gib im Alt-Text eine Kurzfassung und stelle die vollständige Information als Text oder HTML-Tabelle auf der Seite bereit.
Bilder mit Text: Steht im Bild Text, etwa "Sale 20 %", gehört genau dieser Text in den Alt-Text.

So prüfst du es

Browser-Devtools: Rechtsklick auf ein Bild, "Untersuchen". Prüfe, ob das img-Element ein alt-Attribut hat und ob der Text sinnvoll ist.
WAVE-Erweiterung: Die kostenlose Browser-Erweiterung WAVE markiert Bilder ohne Alt-Text und zeigt vorhandene Alt-Texte direkt neben dem Bild an. So siehst du schnell, ob Texte wie "Bild" oder Dateinamen drinstehen.
axe DevTools: Die kostenlose Version meldet fehlende Alternativen über die Regeln image-alt, input-image-alt, svg-img-alt und weitere.
Screenreader: Starte NVDA (Windows, kostenlos) oder VoiceOver (Mac: Cmd + F5) und lies die Seite durch. Hörst du an jeder Stelle, was das Bild aussagt? Werden Schmuckbilder übersprungen?
Bilder ausschalten: Deaktiviere Bilder im Browser oder per Erweiterung. Ergibt die Seite mit den Alt-Texten noch Sinn?

Automatische Tools erkennen nur, ob ein Alt-Text fehlt. Ob er passt, musst du selbst beurteilen.

Alt-Texte für Bilder ergänzen

Worum es geht

Wen es betrifft

So behebst du es

So prüfst du es

Mehr dazu