Bilder sind ein zentraler Bestandteil digitaler Produkte. Sie schaffen Aufmerksamkeit, transportieren Emotionen und helfen dabei, Inhalte verständlicher zu machen. Gleichzeitig gehören Bilder zu den häufigsten Accessibility-Problemen im Web.
Eine der wichtigsten Fragen dabei lautet:
Ist ein Bild dekorativ oder informativ?
Die Antwort entscheidet darüber, ob ein Bild einen Alternativtext benötigt – und wie dieser aussehen sollte.
Dieser Artikel hilft dabei, Bilder korrekt einzuordnen und typische Fehler zu vermeiden.
Warum ist diese Unterscheidung wichtig?
Menschen, die Screenreader nutzen oder Bilder nicht sehen können, sind auf Alternativtexte angewiesen.
Ein schlecht eingesetzter Alt-Text kann dabei genauso problematisch sein wie ein fehlender Alt-Text:
- unnötige Informationen stören die Nutzung
- wichtige Informationen gehen verloren
- Inhalte werden unverständlich
- Navigation wird anstrengender
Deshalb gilt:
Nicht jedes Bild braucht einen Alt-Text. Aber jedes Bild braucht eine bewusste Entscheidung.
Der wichtigste Gedanke zuerst
Stelle dir immer folgende Frage:
Haben sehende Menschen durch dieses Bild Informationen, die anderen sonst fehlen würden?
Wenn die Antwort „Nein“ lautet, ist das Bild meist dekorativ.
Wenn die Antwort „Ja“ lautet, ist es informativ.
Dekorative Bilder
Dekorative Bilder dienen ausschließlich dem visuellen Erscheinungsbild.
Sie:
- vermitteln keine zusätzlichen Informationen
- unterstützen lediglich die Gestaltung
- erzeugen Atmosphäre oder Emotionen
Typische Beispiele:
- Hintergrundbilder
- dekorative Icons
- Stockfotos ohne Informationswert
- visuelle Trennelemente
- reine Illustrationen ohne Kontextrelevanz
Beispiel: Dekoratives Bild
Eine Landingpage zeigt ein Foto von zwei lachenden Menschen neben einem bereits vollständig beschriebenen Werbetext.
Die Bildinformation ist für das Verständnis nicht notwendig.
In diesem Fall:
alt=""Das Bild wird von Screenreadern ignoriert – genau das ist hier gewünscht.
Informative Bilder
Informative Bilder enthalten zusätzliche Informationen, die nicht bereits vollständig im Text vorkommen.
Dazu gehören:
- Diagramme
- Infografiken
- Screenshots
- erklärende Fotos
- Produktbilder
- Schaubilder
- interaktive Icons
- Bilder mit Textinhalten
Beispiel: Produktbild
Ein Smartphone wird gezeigt, um Design, Farbe oder Kameraanordnung zu erklären.
Dann reicht ein leeres alt="" nicht aus.
Beispiel:
alt="Produktfoto: Smartphone mit grünem Gehäuse und Triple-Kamera auf der Rückseite."Entscheidungsbaum für Bilder
Eine einfache Entscheidungshilfe:
1. Hat das Bild einen funktionalen oder informativen Zweck?
Nein
→ dekorativ
→ alt=""
Ja
→ weiter zu Frage 2
2. Enthält das Bild Informationen, die nicht bereits im Text stehen?
Nein
→ oft trotzdem dekorativ
→ alt=""
Ja
→ informativer Alt-Text notwendig
Häufige Fehler bei Alt-Texten
❌ „Bild von …“
Screenreader kündigen Bilder bereits als Bild an.
Schlecht:
alt="Bild von einem Smartphone"Besser:
alt="Smartphone mit grünem Gehäuse und Triple-Kamera"❌ Zu viele Details
Alt-Texte sollten relevante Informationen vermitteln – keine vollständige Bildanalyse.
Nicht hilfreich:
alt="Eine Frau mit blauen Schuhen sitzt auf einem grauen Stuhl neben..."Frage dich:
Welche Information ist im aktuellen Kontext wirklich wichtig?
❌ Doppelte Informationen
Wenn dieselbe Aussage bereits direkt neben dem Bild steht, ist zusätzlicher Alt-Text oft unnötig.
Das reduziert unnötige Wiederholungen für Screenreader-Nutzer.
Sonderfall: Icons
Icons sind besonders häufig problematisch.
Dekorative Icons
Wenn die Bedeutung bereits im Text enthalten ist:
✅
<button>
🔍 Suche
</button>Das Icon selbst benötigt keine zusätzliche Beschreibung.
Funktionale Icons ohne sichtbaren Text
Dann braucht das Element einen zugänglichen Namen:
✅
aria-label="Suche öffnen"Sonderfall: Screenshots
Screenshots sind fast immer informativ.
Besonders problematisch:
- Screenshots mit Text
- UI-Anleitungen
- Fehlermeldungen
- Konfigurationsdialoge
Wichtig:
- relevante Inhalte beschreiben
- Kontext erklären
- nicht jede visuelle Kleinigkeit aufzählen
Ein hilfreicher Perspektivwechsel
Eine gute Frage im Designprozess lautet:
Was würde fehlen, wenn jemand dieses Bild nicht sehen kann?
Genau diese Information gehört – wenn nötig – in den Alt-Text.
Nicht mehr. Aber auch nicht weniger.
Fazit
Die Entscheidung zwischen dekorativen und informativen Bildern ist keine technische Kleinigkeit. Sie beeinflusst direkt, wie zugänglich und verständlich digitale Produkte für viele Menschen sind.
Die wichtigste Erkenntnis:
- Nicht jedes Bild braucht einen Alt-Text.
- Aber jedes Bild braucht eine bewusste Entscheidung.
.