Barrierefreie Bilder: So gestalten Sie Ihre Website zugänglich für alle

Bilder spielen auf Websites eine zentrale Rolle, sei es zur visuellen Unterstützung oder zur Darstellung wichtiger Informationen wie Diagramme oder Symbole. Damit diese Inhalte für alle Menschen zugänglich sind, ist es entscheidend, Bilder barrierefrei zu gestalten. Hier erfahren Sie, wie Sie das einfach und effektiv umsetzen können.

Zwei Arten von Bildern

Dekorative Bilder

Dekorative Bilder haben keinen zusätzlichen Informationsgehalt und dienen nur der Verschönerung der Seite. Sie unterstützen das Design, vermitteln aber keine neuen Inhalte. Typische Beispiele sind Hintergrundbilder oder wiederkehrende Grafiken, deren Informationen bereits im Text erklärt sind. Ein Beispiel wäre ein Bild von einem Baum auf einer Garten-Webseite, wenn der Text bereits beschreibt, wie ein Baum aussieht.

Inhaltstragende Bilder

Inhaltstragende Bilder sind wesentlich für das Verständnis einer Seite, da sie wichtige Informationen transportieren. Dazu gehören Grafiken, die eigenständig eine Aussage vermitteln, oder Bilder, die einen Text ergänzen. Zum Beispiel, ein Diagramm, das die Verkaufszahlen eines Unternehmens zeigt, oder ein Foto, das einen neuen Produktlaunch illustriert.

Was ist eine Bildbeschreibung?

Bildbeschreibungen, auch bekannt als Alternativtexte (alt-Texte), sind notwendig, um Menschen, die die Bilder nicht sehen können, den Zugang zu den visuellen Inhalten zu ermöglichen. Sie beschreiben kurz und präzise, was auf dem Bild zu sehen ist, und heben die relevanten Informationen hervor.

Beispiel:
„Ein rotes Auto parkt vor einem Supermarkt.“ – Dieser Alternativtext reicht aus, wenn es darum geht, ein Bild von einem alltäglichen Szenario zu beschreiben.

„Ein rotes Auto parkt vor einem Supermarkt, während eine Person im Rollstuhl auf den Eingang zugeht.“ – Hier wird eine zusätzliche Information geliefert, die für den Kontext des Bildes wichtig ist.

Die Bildbeschreibung sollte so prägnant wie möglich sein, aber dennoch alle wichtigen Details liefern, die für das Verständnis des Bildes relevant sind. Je nach Kontext kann der Alternativtext kurz oder etwas ausführlicher sein.

Wie man Alternativtexte im Quelltext einfügt

Um Alternativtexte korrekt in den Quelltext Ihrer Website einzufügen, verwenden Sie das alt-Attribut im <img>-Tag:

• Dekorative Bilder: Verwenden Sie das alt-Attribut, lassen Sie es jedoch leer, da keine wichtigen Informationen vermittelt werden:
  <img src=“bild.jpg“ alt=““>
• Inhaltstragende Bilder: Hier sollte das alt-Attribut die relevante Bildbeschreibung enthalten:
  <img src=“verkaufsdiagramm.jpg“ alt=“Ein Diagramm, das die Verkaufszahlen des Unternehmens im ersten Quartal zeigt.“>

Für SVG-Dateien, die direkt in das HTML eingebunden werden, nutzen Sie:

• Für dekorative Bilder:
  <svg aria-hidden=“true“>…</svg>
• Für inhaltstragende Bilder:
  <svg aria-label=“Menü öffnen“ role=“img“>…</svg>

Barrierefreiheit einfach umsetzen

Barrierefreie Bilder sind ein zentraler Bestandteil der Web-Accessibility. Indem Sie sicherstellen, dass Alternativtexte korrekt eingebunden sind, ermöglichen Sie es Menschen, die auf Screenreader oder andere assistive Technologien angewiesen sind, Ihre Inhalte vollständig zu erfassen.