Dekorative vs. informative Bilder unterscheiden

1. Warum die Unterscheidung über Barrierefreiheit entscheidet

Die Unterscheidung zwischen dekorativen und informativen Bildern ist eine der grundlegendsten, aber am häufigsten falsch getroffenen Entscheidungen in der Barrierefreiheit von Webseiten. Nach WCAG 2.1 Erfolgskriterium 1.1.1 (Nicht-Text-Inhalt) braucht jedes Bild, das Information transportiert, eine Textalternative, während rein dekorative Bilder bewusst aus dem Accessibility Tree entfernt werden sollen, damit Screenreader-Nutzer nicht mit bedeutungslosen Ansagen wie „Bild, Pfeil-Icon-Blau-Rechts" belästigt werden. Beide Fehler kosten Nutzer Zeit und Vertrauen: fehlende Alt-Texte bei informativen Bildern lassen Screenreader-Nutzer im Unklaren, während überflüssige Alt-Texte bei dekorativen Icons die Navigation mit Lärm überfrachten.

In der Praxis zeigt sich, dass Entwickler eher zu viel als zu wenig Alt-Text vergeben, weil pauschale Regeln wie „jedes Bild braucht ein alt-Attribut" ohne den Zusatz „aber nicht zwangsläufig einen beschreibenden Inhalt" missverstanden werden. Ein Trennstrich-Icon vor einer Produktkategorie, ein dekoratives Muster im Seitenhintergrund oder ein rein illustratives Foto neben einem bereits vollständigen Textabsatz sind klassische Kandidaten für ein leeres alt-Attribut, keine Bildbeschreibung.

2. Der praktische Test: informativ oder dekorativ?

Der zuverlässigste praktische Test lautet: Was passiert, wenn ich dieses Bild komplett entferne, verliert die Seite dadurch Information oder Funktion? Wenn die Antwort nein lautet, weil der umgebende Text, die Überschrift oder ein benachbartes Label dieselbe Information bereits vermittelt, ist das Bild dekorativ und bekommt ein leeres alt-Attribut. Wenn die Antwort ja lautet, weil das Bild etwas zeigt, das nirgendwo sonst auf der Seite steht, wie ein Diagramm, ein Produktfoto ohne Textbeschreibung oder ein Icon, das als einziges Element eine Aktion signalisiert, ist es informativ und braucht eine passende Textalternative.

Ein zweiter hilfreicher Test bei interaktiven Elementen: Würde ein sehender Nutzer das Bild anklicken, um etwas zu erreichen? Ein Lupen-Icon in einem beschrifteten Such-Button ist dekorativ, weil der sichtbare Text „Suchen" bereits die Funktion beschreibt. Ein Lupen-Icon als einziger Inhalt eines Buttons ohne sichtbaren Text ist hingegen funktional informativ und braucht entweder ein aria-label am Button oder einen versteckten Text, weil sonst niemand mit Screenreader erfährt, wozu der Button dient. Dieser Test funktioniert bei fast jedem Zweifelsfall zuverlässig.

3. Dekorative Bilder korrekt verstecken: alt=""

Ein leeres alt-Attribut (alt="") ist kein Bug und keine vergessene Beschreibung, sondern die korrekte, semantisch bewusste Methode, um ein Bild aus dem Accessibility Tree zu entfernen. Der entscheidende Unterschied zu einem komplett fehlenden alt-Attribut: Ohne alt-Attribut lesen manche Screenreader den Dateinamen oder den vollständigen Bildpfad vor, etwa „hero-banner-final-v3.jpg", was für Nutzer vollkommen wertlos und störend ist. Mit alt="" überspringt der Screenreader das Bild lautlos, genau wie ein sehender Nutzer ein dekoratives Element unbewusst ignoriert.

Wichtig ist, dass das alt-Attribut trotzdem im Markup vorhanden sein muss, auch wenn es leer ist. Fehlt es komplett, gilt das Bild für viele Prüfwerkzeuge und Screenreader als fehlerhaft ausgezeichnet, nicht als bewusst dekorativ. In Hyvä-Templates lässt sich diese Regel direkt in Blöcken und Komponenten verankern, sodass dekorative Bilder aus dem CMS oder aus wiederkehrenden Layoutelementen konsistent mit leerem alt ausgeliefert werden, ohne dass Redakteure jedes Mal daran denken müssen.

<!-- WRONG: fehlendes alt-Attribut, Screenreader liest Dateipfad vor -->
<img src="/media/wysiwyg/divider-line.png">

<!-- WRONG: dekoratives Icon bekommt eine unnötige Beschreibung -->
<img src="/media/icons/arrow-right.svg" alt="Pfeil nach rechts Icon Blau">

<!-- RIGHT: dekoratives Bild wird bewusst aus dem Accessibility Tree entfernt -->
<img src="/media/wysiwyg/divider-line.png" alt="" role="presentation">

<!-- RIGHT: informatives Bild mit präzisem, kontextbezogenem Alt-Text -->
<img
    src="/media/catalog/product/sneaker-red-side.jpg"
    alt="Roter Laufschuh Modell Runner Pro, Seitenansicht"
    width="600"
    height="600"
>

4. CSS-Hintergrundbilder statt img für reine Dekoration

Für Bilder, die ausschließlich der visuellen Gestaltung dienen, wie Musterhintergründe, dekorative Trennlinien, Eckverzierungen oder Textur-Overlays, ist ein CSS-Hintergrundbild oft die sauberere Lösung als ein <img>-Element mit leerem alt. CSS-Hintergrundbilder werden von Screenreadern grundsätzlich nicht im Accessibility Tree berücksichtigt, weil sie technisch kein Inhalt, sondern reine Präsentation sind. Das entlastet Entwickler von der Frage nach dem richtigen alt-Attribut komplett, weil sich die Frage gar nicht erst stellt.

Die Umstellung von <img> auf background-image ist aber nur dann korrekt, wenn das Bild wirklich keine Information trägt, die nicht auch textlich vorhanden ist. Ein Produktbild als CSS-Hintergrund zu verstecken, nur um sich das Alt-Text-Schreiben zu ersparen, ist ein Antipattern, weil es Information für Screenreader-Nutzer komplett unzugänglich macht, während sehende Nutzer sie weiterhin sehen. Faustregel: Ausschließlich echte Dekoration gehört ins CSS, jede Information gehört ins semantische Markup.

/* RIGHT: rein dekorative Textur ausschließlich per CSS, kein img-Tag nötig */
.category-header {
  background-image: url("/media/wysiwyg/texture-subtle.png");
  background-repeat: repeat;
  background-position: top left;
}

/* RIGHT: dekoratives Trennelement zwischen zwei Sektionen */
.section-divider {
  background-image: url("/media/wysiwyg/divider-ornament.svg");
  background-repeat: no-repeat;
  background-position: center;
  height: 24px;
}

/* WRONG: Produktbild als CSS-Hintergrund versteckt Information komplett */
.product-teaser {
  background-image: url("/media/catalog/product/sneaker-red.jpg");
  /* Screenreader-Nutzer erfahren nie, welches Produkt gezeigt wird */
}

5. aria-hidden und role="presentation" gezielt einsetzen

aria-hidden="true" entfernt ein Element aus dem Accessibility Tree, unabhängig davon, ob es visuell sichtbar bleibt. Das ist das richtige Werkzeug für Icon-Fonts und Inline-SVGs, die neben einem bereits vorhandenen Textlabel stehen, etwa ein Warenkorb-Symbol direkt neben dem sichtbaren Wort „Warenkorb" in der Header-Navigation. Ohne aria-hidden würde ein Screenreader je nach SVG-Struktur unter Umständen den Titel oder Beschreibungstext des SVGs vorlesen und damit das Label duplizieren oder verwirren.

role="presentation" erfüllt einen ähnlichen Zweck, wirkt aber auf der semantischen Rollen-Ebene statt auf der Sichtbarkeits-Ebene und eignet sich besonders für <img>-Elemente und Tabellen, die rein layoutbedingt eingesetzt werden. Bei Icon-only-Buttons, also Buttons ohne sichtbaren Text, ist die Kombination entscheidend: Das SVG-Icon bekommt aria-hidden="true", weil es rein dekorativ innerhalb des Buttons ist, während der Button selbst über aria-label den fehlenden sichtbaren Text ersetzt. Wird nur eines von beiden gesetzt, bleibt der Button entweder stumm oder doppelt beschriftet.

<!-- RIGHT: Icon neben vorhandenem Textlabel, SVG ist rein dekorativ -->
<a href="/checkout/cart" class="flex items-center gap-2">
    <svg aria-hidden="true" focusable="false" class="w-5 h-5">
        <use href="#icon-cart"></use>
    </svg>
    <span>Warenkorb</span>
</a>

<!-- RIGHT: Icon-only Button, Label kommt ausschließlich vom aria-label -->
<button type="button" aria-label="Suche öffnen" class="p-2">
    <svg aria-hidden="true" focusable="false" class="w-5 h-5">
        <use href="#icon-search"></use>
    </svg>
</button>

<!-- WRONG: weder aria-hidden auf dem Icon noch aria-label auf dem Button -->
<button type="button" class="p-2">
    <svg class="w-5 h-5"><use href="#icon-search"></use></svg>
</button>

6. Informative Bilder: gute Alt-Texte schreiben

Sobald ein Bild als informativ eingestuft ist, entscheidet die Qualität des Alt-Textes darüber, ob Screenreader-Nutzer dieselbe Information erhalten wie sehende Nutzer. Ein guter Alt-Text beschreibt den Zweck des Bildes im jeweiligen Kontext, nicht jedes visuelle Detail. „Foto" oder „Bild von" am Anfang ist überflüssig, weil Screenreader das Element bereits als Bild ansagen. Bei Produktbildern gehört die für die Kaufentscheidung relevante Information in den Alt-Text: Modellname, Farbe, Ansicht, nicht die exakte Pixelanordnung oder Beleuchtung im Foto.

Ein häufiger Fehler ist redundanter Alt-Text, der denselben Inhalt wiederholt, der bereits als sichtbarer Text neben dem Bild steht, etwa ein Alt-Text „Roter Laufschuh Runner Pro" direkt neben einer Produktüberschrift „Roter Laufschuh Runner Pro". In diesem Fall ist das Bild aus informativer Sicht redundant zum Text und könnte technisch sogar ein leeres alt bekommen, sofern das Bild selbst keine zusätzliche visuelle Information wie eine bestimmte Perspektive liefert. Alt-Text-Länge sollte sich an der Informationsdichte orientieren, nicht an einer festen Zeichenzahl, üblich sind etwa 80 bis 125 Zeichen.

7. Icons in Buttons und Links: wann braucht das Icon einen Namen?

Icons innerhalb von Buttons und Links sind die häufigste Fehlerquelle bei der Unterscheidung zwischen dekorativ und informativ, weil dieselbe SVG-Datei je nach Kontext beide Rollen einnehmen kann. Steht neben dem Icon bereits ein sichtbarer Text wie „Zum Warenkorb hinzufügen", ist das Icon reines Beiwerk und bekommt aria-hidden="true". Ist das Icon der einzige Inhalt des interaktiven Elements, etwa ein Herz-Icon zum Merken eines Produkts ohne sichtbaren Text, übernimmt es funktional die Rolle des Labels und der Button braucht zwingend ein aria-label, das sich idealerweise mit dem Zustand ändert.

Bei zustandsabhängigen Icons, etwa einem Merkzettel-Herz, das zwischen „gemerkt" und „nicht gemerkt" wechselt, muss auch das aria-label dynamisch mitgehen, sonst bleibt der Screenreader-Nutzer über den aktuellen Zustand im Unklaren, während sehende Nutzer den Farbwechsel des Icons sofort erkennen. In Hyvä-Themes mit Alpine.js lässt sich das direkt über eine reaktive x-bind:aria-label-Bindung lösen, die synchron zum visuellen Zustand aktualisiert wird, statt das Label separat und fehleranfällig zu pflegen.

// Barrierefreier Wishlist-Button: aria-label folgt dem visuellen Zustand
function toggleWishlist(button) {
  const isSaved = button.getAttribute('aria-pressed') === 'true';
  const nextState = !isSaved;

  button.setAttribute('aria-pressed', String(nextState));
  button.setAttribute(
    'aria-label',
    nextState ? 'Von Merkliste entfernen' : 'Zur Merkliste hinzufügen'
  );

  // Icon selbst bleibt aria-hidden, nur der Button trägt die Information
  button.querySelector('svg').setAttribute('aria-hidden', 'true');
}

document.querySelectorAll('[data-wishlist-toggle]').forEach((button) => {
  button.addEventListener('click', () => toggleWishlist(button));
});

8. Komplexe Bilder: Diagramme, Infografiken und Charts

Komplexe Bilder wie Diagramme, Infografiken oder Schaubilder lassen sich nicht in einem kurzen alt-Attribut vollständig beschreiben, ohne dass der Text unpraktikabel lang wird. Die etablierte Lösung ist ein kurzer, prägnanter Alt-Text, der den Zweck des Bildes zusammenfasst, kombiniert mit einer ausführlichen Beschreibung im sichtbaren Textfluss direkt neben oder unter dem Bild, etwa als Bildunterschrift in einem <figure>-Element mit <figcaption>. Das longdesc-Attribut gilt inzwischen als veraltet und wird von den meisten modernen Screenreadern nicht mehr zuverlässig unterstützt.

Bei Datenvisualisierungen wie Balkendiagrammen oder Statistiken zu Umsatzzahlen ist die robusteste Lösung eine zusätzliche, für sehende Nutzer visuell versteckte Datentabelle mit derselben Information, etwa über die CSS-Klasse sr-only. So erhalten Screenreader-Nutzer strukturierten Zugriff auf exakt dieselben Zahlen, statt auf eine grobe Zusammenfassung angewiesen zu sein. aria-describedby kann zusätzlich auf einen längeren Beschreibungstext verweisen, wenn dieser aus Platzgründen nicht direkt im sichtbaren Textfluss stehen kann.

9. Bildtypen und Testing im direkten Vergleich

Die folgende Übersicht fasst die wichtigsten Entscheidungsregeln zwischen dekorativen und informativen Bildern zusammen und zeigt, welche Technik in welchem Fall korrekt ist. Automatisiertes Testing mit axe-core oder Lighthouse deckt einen Großteil der Fehler bereits vor dem Deployment auf, etwa fehlende alt-Attribute oder verdächtig lange Alt-Texte bei vermutlich dekorativen Icons, ersetzt aber nicht den manuellen Test mit einem echten Screenreader wie NVDA oder VoiceOver, weil nur ein Mensch beurteilen kann, ob ein Alt-Text inhaltlich sinnvoll ist.

{
  "rules": {
    "image-alt": { "enabled": true },
    "aria-hidden-body": { "enabled": true },
    "svg-img-alt": { "enabled": true },
    "aria-input-field-name": { "enabled": true }
  },
  "reporter": "v2",
  "resultTypes": ["violations", "incomplete"],
  "runOnly": {
    "type": "tag",
    "values": ["wcag2a", "wcag2aa", "wcag21a"]
  }
}

In der Praxis hängen die Entscheidungen oft zusammen: Wer den Entfernungstest konsequent anwendet, trifft bei Icons, Hintergrundbildern und komplexen Grafiken fast automatisch die richtige Wahl zwischen alt="", CSS-Hintergrund und ausführlichem Alt-Text. Automatisierte Tools decken die strukturellen Fehler zuverlässig auf, den inhaltlichen Feinschliff braucht es aber immer noch von einem Menschen mit Screenreader-Erfahrung.

10. Zusammenfassung

Die Unterscheidung zwischen dekorativen und informativen Bildern löst ein einfaches, aber weitreichendes Problem: Screenreader-Nutzer sollen exakt die Information erhalten, die sehende Nutzer aus einem Bild ziehen, nicht mehr und nicht weniger. Der Entfernungstest, was passiert, wenn dieses Bild komplett verschwindet, liefert in fast jedem Zweifelsfall eine klare Antwort. Dekorative Bilder gehören mit leerem alt-Attribut, als CSS-Hintergrund oder mit aria-hidden aus dem Accessibility Tree entfernt. Informative Bilder brauchen einen präzisen, kontextbezogenen Alt-Text, der den Zweck des Bildes beschreibt, nicht jedes visuelle Detail.

Der größte Hebel liegt darin, diese Regel konsequent über alle Bildtypen eines Shops hinweg anzuwenden, von Produktfotos über CMS-Banner bis zu Icon-only-Buttons in der Navigation. Automatisiertes Testing mit axe-core oder Lighthouse findet fehlende oder verdächtige alt-Attribute zuverlässig, ersetzt aber nicht den manuellen Test mit einem echten Screenreader, weil nur ein Mensch beurteilen kann, ob ein Alt-Text inhaltlich wirklich hilfreich ist.

11. FAQ: Dekorative vs. informative Bilder