Alt-Texte richtig schreiben

Was ist ein Alt-Text?

Ein Alt-Text (Alternativtext) ist eine kurze Textbeschreibung, die im HTML-Code eines Bildes hinterlegt wird. Wenn das Bild nicht geladen werden kann oder ein Screenreader die Seite vorliest, wird stattdessen der Alt-Text angezeigt oder vorgelesen.

Im HTML sieht das so aus:

<img src="foto.jpg"
     alt="Zwei Personen am Schreibtisch,
          die gemeinsam auf einen Laptop schauen">

Der Alt-Text ist das alt-Attribut. Er ist nach WCAG 2.2 Kriterium 1.1.1 für jedes Bild Pflicht - entweder als beschreibender Text oder als leeres Attribut (alt="") bei rein dekorativen Bildern.

Die Grundregeln

Die folgenden Regeln basieren auf den Empfehlungen von BIK für alle, der Bundesfachstelle Barrierefreiheit und der Hilfsgemeinschaft der Blinden und Sehschwachen Österreichs:

1. Beschreiben Sie den Zweck, nicht das Aussehen

Fragen Sie sich: Welche Information soll das Bild vermitteln? Die Antwort ist Ihr Alt-Text.

2. Halten Sie sich kurz

Alt-Texte sollten so kurz wie möglich und so lang wie nötig sein. Als Richtwert gelten 80-100 Zeichen. Vermeiden Sie Füllwörter und Einleitungen wie "Das Bild zeigt..." oder "Foto von..." - der Screenreader kündigt das Bild bereits als solches an (Quelle: Hilfsgemeinschaft).

3. Dekorative Bilder: Leerer Alt-Text

Nicht jedes Bild braucht eine Beschreibung. Rein dekorative Bilder - Hintergrundmuster, Trennlinien, Schmuckgrafiken - bekommen ein leeres Alt-Attribut: alt="". Der Screenreader überspringt sie dann (Quelle: BIK für alle).

4. Verlinkte Bilder: Ziel beschreiben

Wenn ein Bild gleichzeitig ein Link ist, beschreibt der Alt-Text das Linkziel, nicht das Bild. Der Nutzer muss wissen wohin der Klick führt.

5. Diagramme und Infografiken: Kernaussage

Bei Diagrammen beschreiben Sie die Kernaussage, nicht jeden einzelnen Datenpunkt. Für komplexe Daten bieten Sie eine Tabelle als Alternative an.

6. Text in Bildern vermeiden

Wenn wichtige Informationen als Text in einem Bild stehen (z.B. Öffnungszeiten in einer Grafik), muss dieser Text auch im Alt-Text oder als normaler HTML-Text auf der Seite stehen. Besser: Verwenden Sie gar keinen Text in Bildern (WCAG 1.4.5).

Entscheidungshilfe: Welcher Alt-Text ist richtig?

Stellen Sie sich bei jedem Bild diese Fragen:

1. Ist das Bild rein dekorativ? (Schmuckgrafik, Hintergrund, Trennlinie) → alt=""
2. Ist das Bild ein Link? → Alt-Text beschreibt das Linkziel
3. Ist das Bild ein Button? → Alt-Text beschreibt die Aktion ("Suche starten", "Menü öffnen")
4. Zeigt das Bild Text? → Alt-Text enthält den gleichen Text
5. Ist das Bild informativ? → Alt-Text beschreibt die Information die das Bild vermittelt
6. Ist das Bild komplex? (Diagramm, Infografik) → Kurzer Alt-Text + ausführliche Beschreibung oder Datentabelle im Text

Diese Entscheidungshilfe basiert auf dem W3C Alt-Text Decision Tree.

Häufige Fehler

• "Bild", "Foto", "Grafik" als Alt-Text - der Screenreader sagt bereits "Bild", das ist doppelt
• Dateinamen als Alt-Text - "DSC_0042.jpg" hilft niemandem
• Keyword-Stuffing - "Zahnarzt München Zahnarztpraxis München bester Zahnarzt" ist Spam, kein Alt-Text
• Zu lange Beschreibungen - der Screenreader liest alles am Stück vor, halten Sie sich unter 100 Zeichen
• Alt-Text für Deko-Bilder - ein dekoratives Blumenmuster braucht keine Beschreibung
• Fehlendes alt-Attribut - ohne alt liest der Screenreader den Dateinamen oder die URL vor