Alternativtexte für Bilder richtig schreiben
Alt-Texte sind eine der häufigsten Hürden zur Barrierefreiheit – und gleichzeitig eines der am häufigsten missverstandenen Themen. Diese Anleitung zeigt, wann ein Bild einen Alt-Text braucht, was hineingehört und was nicht. Und sie räumt mit einem verbreiteten Irrtum auf: dem Glauben an den einen perfekten Alternativtext.
Den perfekten Alt-Text gibt es nicht
Bevor wir in Regeln und Beispiele einsteigen, ein ehrlicher Hinweis: Den einen perfekten Alternativtext, der für alle Nutzer:innen gleich gut funktioniert, gibt es nicht. Wenn zehn erfahrene Autor:innen dasselbe Bild beschreiben, kommen zehn unterschiedliche Texte heraus – und keiner davon ist „der richtige".
Der Grund dafür ist nicht Schlamperei. Er liegt darin, dass die Menschen, die Alt-Texte hören oder lesen, eine sehr heterogene Gruppe sind. Was für die eine Person hilfreich ist, kann für die andere zu detailliert oder zu vage sein.
Wer hört eigentlich Alt-Texte?
Die Annahme, „blinde Nutzer:innen" wären eine einheitliche Zielgruppe, ist eine der häufigsten Fehleinschätzungen beim Schreiben von Alt-Texten. In der Realität fallen die Menschen, die auf Alt-Texte angewiesen sind, auf einem breiten Spektrum von Sehfähigkeit und visueller Erfahrung.
- Geburtsblinde Personen Haben nie visuell wahrgenommen. Visuelle Konzepte wie „goldene Stunde", „Pastellton" oder „verschwommen" sind ihnen zwar sprachlich vertraut, aber ohne konkrete Sinneserfahrung.
- Später erblindete Personen Haben visuelle Erinnerungen und nutzen dasselbe visuelle Vokabular wie Sehende. Detaillierte Bildbeschreibungen können emotional und inhaltlich sehr wertvoll sein.
- Sehbehinderte Personen Sehen das Bild teilweise oder unscharf und nutzen den Alt-Text ergänzend zum eigenen visuellen Eindruck – brauchen oft präzise Details, die optisch nicht erkennbar sind.
- Sehende mit Hilfsmitteln Nutzen Screenreader auch bei guter Sehkraft – etwa bei Leseschwäche, ADHS, kognitiven Einschränkungen oder beim Multitasking. Brauchen Alt-Texte als ergänzende Information zum Bild.
Das bedeutet: Ein Alt-Text, der für die eine Gruppe perfekt funktioniert, ist für die andere möglicherweise zu wenig oder zu viel. Statt nach dem einen perfekten Text zu suchen, hilft es, sich an dem zu orientieren, was die meisten Nutzer:innen in der jeweiligen Situation brauchen – und Alternativen anzubieten, wenn ein Bild komplex ist.
Hinzu kommt: Auch der Kontext verändert, was ein guter Alt-Text ist. Dasselbe Foto eines goldenen Retrievers braucht auf einer Tierschutzseite eine andere Beschreibung als auf einem Verkehrsblog („Hund läuft auf Straße"). Das Bild ist gleich, die Funktion ist anders.
Wann braucht ein Bild einen Alt-Text?
WCAG 2.2 fordert in Erfolgskriterium 1.1.1 (Nicht-Text-Inhalt, Stufe A), dass für alle Bilder, die Information vermitteln, eine Textalternative bereitsteht. Für Bilder, die rein dekorativ sind, gilt das nicht – sie sollen explizit als dekorativ gekennzeichnet werden.
Praktisch gesehen muss jedes <img>
-Element im HTML ein alt
-Attribut haben. Der Inhalt unterscheidet sich je nach
Bildfunktion – aber das Attribut fehlt nie. Ein fehlendes alt
ist nicht dasselbe wie ein leeres alt=""
: Bei
fehlendem Attribut liest der Screenreader oft den Dateinamen vor („IMG_4592.jpg"),
ein leeres Attribut hingegen wird sauber übersprungen.
Der Entscheidungsbaum
Bevor du einen Alt-Text formulierst, lohnt sich eine kurze Klärung der Bildfunktion. Diese fünf Fragen führen dich zur richtigen Vorgehensweise:
Ist das Bild rein dekorativ?
Wenn es keine Information vermittelt und nur die Optik aufwertet
(Trennlinien, Hintergrundmuster, ergänzende Stimmungsbilder neben
redundantem Text), dann alt=""
setzen.
Ist das Bild ein Link oder Button?
Dann beschreibt der Alt-Text die Funktion, nicht das Bild.
Ein Lupensymbol als Such-Button bekommt alt="Suchen"
–
nicht „Lupe".
Enthält das Bild Text?
Dann muss der Text im Alt-Text wortwörtlich erscheinen. Bei Logos ist das in der Regel der Markenname.
Ist es ein komplexes Bild – Diagramm, Infografik, Karte?
Dann reicht der Alt-Text nicht aus. Kurze Zusammenfassung im alt
, ausführliche Beschreibung daneben im Text oder
als <figcaption>
.
Vermittelt das Bild Information, die im Text nicht steht?
Dann brauchst du einen beschreibenden Alt-Text, der den Zweck im Kontext erfüllt. Frage dich: Was würde ich jemandem am Telefon erzählen, der das Bild nicht sieht?
Sechs Regeln, die in den meisten Fällen helfen
Diese sechs Regeln sind keine universellen Wahrheiten, aber sie sind eine verlässliche Orientierung. Sie funktionieren in der überwiegenden Mehrheit der Fälle – sofern du im Kopf behältst, dass der konkrete Kontext immer Vorrang hat.
1. Funktion vor Aussehen
Beschreibe, was das Bild im Text leistet , nicht wie es visuell aussieht. Wenn das Bild einen Sachverhalt belegt, gehört der Sachverhalt in den Alt-Text – nicht die Bildkomposition.
2. Kurz halten, aber nicht knausern
Ein guter Richtwert sind etwa 80 bis 125 Zeichen. Manche Screenreader brechen bei 125 oder 250 Zeichen ab, je nach Einstellung. Bei komplexen Bildern lohnt sich der Umweg über eine längere Beschreibung neben dem Bild.
3. Nicht mit „Bild von" beginnen
Screenreader kündigen Bilder bereits an („Grafik", „Image"). Wenn du „Bild von einem Hund" schreibst, hört die Nutzer:in „Grafik, Bild von einem Hund". Schreibe stattdessen direkt den Inhalt: „Hund auf einer Wiese".
4. Keine Doppelung mit umgebendem Text
Wenn die Bildunterschrift oder der umgebende Text schon alles Wesentliche sagt, darf der Alt-Text auch leer bleiben – sonst hören Screenreader-Nutzer:innen dieselbe Information doppelt.
5. Wichtige Details, nicht alle Details
Frag dich: Welche Informationen sind im Kontext dieser Seite relevant? Die Haarfarbe der Person ist auf einer Personalseite vielleicht egal, auf einer Friseur-Website aber sehr wichtig.
6. Im Zweifel mit Betroffenen testen
Die zuverlässigste Methode, einen Alt-Text zu beurteilen, ist Nutzungstest mit Screenreader-Nutzer:innen. Was sich für sehende Autor:innen gut anfühlt, kann in der Hörsituation seltsam wirken – und umgekehrt.
Beispiele aus der Praxis
Die folgenden Beispiele zeigen, wie sich derselbe Bildtyp je nach Kontext unterschiedlich beschreiben lässt:
Produktbild im Online-Shop
Im Shop sind Produktdetails kaufentscheidend. Farbe, Modell und Material gehören in den Alt-Text – das Wort „Laufschuh" allein reicht nicht.
Dasselbe Foto als Stimmungsbild auf einer Blog-Startseite
Wenn das Bild nur die Stimmung des Beitrags illustriert und nicht direkt informativ ist, kann der Alt-Text deutlich kürzer ausfallen – manchmal sogar leer bleiben, wenn der Text die Stimmung schon vermittelt.
Diagramm in einem Geschäftsbericht
Bei Diagrammen fasst der Alt-Text die Kernaussage zusammen. Die
vollständigen Daten gehören in eine zugängliche Tabelle oder den
Fließtext daneben – nicht in das alt
-Attribut.
Typische Fehler – und wie man sie vermeidet
alt="DSC_8472.jpg"
alt="Geschäftsführerin Sophie Johanning bei einem Vortrag"
alt="Bild von einem Hund auf einer Wiese"
alt="Hund auf einer Wiese"
alt="Laufschuh Sportschuh Joggen Marathon Training Damen Herren"
alt="Damen-Laufschuh in Blau-Weiß, Sohle mit Dämpfung"
Dekorative Bilder: Wann alt=""
die richtige Antwort ist
Nicht jedes Bild braucht eine inhaltliche Beschreibung. Wenn ein Bild
ausschließlich der Optik dient und keine Information ergänzt, ist alt=""
die saubere Lösung. Screenreader überspringen das
Bild dann ohne Hinweis.
Typische Beispiele für rein dekorative Bilder sind:
- Trennlinien, Schmuckelemente, Hintergrundmuster
- Stimmungsbilder neben einem Text, der die Stimmung schon vermittelt
- Icons, die rein dekorativ neben einem aussagekräftigen Label stehen
- Stockfotos, die nur den Eindruck einer Seite auflockern
Wichtig: alt=""
ist nicht dasselbe wie kein alt
-Attribut.
Bei fehlendem Attribut liest mancher Screenreader den Dateinamen vor oder
meldet „Bild ohne Beschreibung" – beides ist störend. Das leere Attribut
hingegen wird sauber übersprungen.
Alt-Texte systematisch in den Workflow bringen?
Wir prüfen die Bilder auf deiner Website, identifizieren Lücken und entwickeln mit deinem Team einen Prozess, der Alt-Texte zur Selbstverständlichkeit macht.
Beratung anfragen