Entscheidungshilfe: Bilder dekorativ oder informativ?

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.

.