Barrierefreie Bilder im Web

Fast jede Website benutzt Bilder. Sie dienen oft dazu die Seite visuell interessant zu machen, enthalten aber teilweise auch wichtige Informationen, wie Diagramme. Umso wichtiger ist es, Bilder barrierefrei auf Website einzubinden und auszuzeichnen, damit alle Menschen die darin enthaltenen Informationen erfassen können.

Grundsätzlich unterscheidet man zwei Arten von Bildern:

Dekorative Bilder

Diese Bilder dienen ausschließlich der Dekoration und enthalten keine Informationen, die nicht im Text der Website vorkommen. Diese Bilder sind oft Hintergrundbilder oder Bilder, die Inhalte wiederholen, die im Text angegeben sind. Ein Diagramm ist beispielsweise dann dekorativ, wenn im Fließtext daneben die gleichen Informationen erwähnt sind.

Inhaltstragende Bilder

Bilder, die für das Verständnis der Seite wichtig sind oder zusätzliche Inhalte transportieren sind inhaltstragend. Dazu gehören auch für sich selbst stehende Diagramme und Bilder, die zum Beispiel Nachrichten illustrieren. Auch Icons und Symbole tragen Informationen, besonders, wenn sie auf Schaltflächen benutzt werden.

Was ist eine Bildbeschreibung?

Um Zugang für Menschen sicherzustellen, die Bilder nicht sehen können, müssen Bildbeschreibungen angegeben werden. Diese werden oft auch Alternativtexte genannt.

Bildbeschreibungen sollen wiedergeben, was auf einem Bild zu sehen ist. Der Fokus liegt dabei auf Inhalten, die für eine*n sehende*n Nutzer*in direkt klar sind. Beispielsweise sollte die Namen von bekannten Personen genannt, oder visuelle Merkmale abgebildeter Personen (wie die Kleidung) erwähnt werden.

Beispiel:
Da es bei Bildbeschreibungen immer auf den Kontext, in dem das Bild verwendet wird, ankommt, gibt es keine generellen Regeln. Fassen Sie das Bild in einem Satz zusammen:

Bundeskanzler Scholz spricht im Bundestag.

Diese Bildbeschreibung ist ausreichend, wenn es sich um eine normale Bundestagsrede handelt.

Bundeskanzler Scholz bei der Rede zum Tag der deutschen Einheit am mit Blumen geschmückten Rednerpult des Bundestages.

In diesem Beispiel sind der Anlass und die Dekoration ein wichtiger Bestandteil des Bildes. Heben Sie also Besonderheiten hervor, wenn sich das Bild ein konkretes Ereignis oder einen konkreten Moment dokumentiert.

Tipp: Die Bildbeschreibung sollte so kurz wie möglich aber so lang wie nötig sein: Lassen Sie keine wichtigen Informationen weg, aber schreiben Sie auch keine zu langen Bildbeschreibungen. Sollte ein Bild viele Informationen vermitteln, kann der Alternativtext jedoch auch länger ausfallen.

Alternativtexte: Einbindung im Quelltext

Bei Bildern, die mittels <img>-Element eingebunden werden, muss das alt-Attribut vorhanden sein.

Bei dekorativen Bildern sollte das Attribut leer sein (alt=""), bei inhaltstragenden Bildern enthält das Bild die Bildbeschreibung:
<img src="…" alt="Bundeskanzler Scholz bei der Rede zum Tag der deutschen Einheit am mit Blumen geschmückten Rednerpult des Bundestages.">

Wenn Sie SVG (Scalable Vector Graphics) direkt in ihr HTML einbinden, nutzen Sie folgenden Code für dekorative Bilder:
<svg aria-hidden="true">…</svg>

Und folgenden Code für Inhaltstragende:
<svg aria-label="Öffnen" role="img">…</svg>

Sie möchten Ihre Website barrierefrei gestalten?

Barrierefreiheit ist so vielfältig, wie Menschen mit Behinderungen es sind. Jede Website hat spezielle Anforderungen und Herausforderungen. Wir haben Ihnen hilfreiche Tipps und Anleitungen zusammengestellt, wie Sie Ihre Website oder Ihren Webshop barrierefrei gestalten können.

1-Klick-Lösungen (Overlays) für Barrierefreiheit

Informieren Sie sich über die 1-Klick-Lösungen, die momentan von vielen Anbietern beworben werden und erfahren Sie, weshalb diese Lösungen nicht ausreichen, um Ihre Website barrierefrei zu machen.

Mehr über Overlays erfahren

Barrierefreie Texte

Viele wichtige Informationen werden im Internet durch geschriebenen Text vermittelt. Lernen Sie, worauf es beim Schreiben von Texten ankommt, um Ihre Inhalte einfacher zugänglich zu machen.

Texte barrierefrei gestalten

Audio und Video barrierefrei

Bei audiovisuellen Medien gibt es einiges zu beachten: Wie erfahren Menschen, die Videos nicht sehen können, was zu sehen ist? Und wie können gehörlose Menschen Sprache und Geräuschen folgen?

Barrierefreie Audio- und Videoinhalte

Was mache ich, bis meine Website barrierefrei ist?

Websites, sofern sie nicht von Grund auf barrierefrei entwickelt wurden, werden meist nicht von einem Tag auf den anderen barrierefrei. Erfahren Sie wie Sie die Zeit bis zur vollständigen Barrierefreiheit überbrücken können.

Der Weg zur Barrierefreiheit

Barrierefreies Content-Management-System (CMS)

Barrierefreiheit beginnt mit der Erstellung der Inhalte. Ihre Inhalte müssen über alle Informationen verfügen, damit beispielsweise Screenreader gut damit umgehen können. Ein gutes Content Management System (CMS) hilft dabei.

Barrierefreies CMS nutzen