Bilder und Grafiken

Beschreiben Sie, was Sie sehen!

Was ist auf einem Bild bzw. einer Grafik zu sehen? Diese Frage sollten Sie sich bei jedem Bild stellen, das Sie auf Ihrer Webseite verwenden. Die Antwort darauf formulieren Sie in einem sogenannten Alternativtext. Dieser beschreibt den Inhalt eines Bildes. Damit wissen blinde und sehbehinderte Menschen, was auf dem jeweiligen Bild zu erkennen ist.

Auf einer Webseite werden unterschiedliche Bilder, Grafiken und Elemente eingesetzt:

• verlinkte oder nicht verlinkte Bilder,
• dekorative Bilder,
• Icons,
• bildbasierte CAPTCHAs.

Im Folgenden erklären wir Ihnen, was Sie jeweils beachten müssen und zeigen Beispiele der Umsetzung.

Nicht verlinkte Bilder und Grafiken

Sehr häufig werden Bilder auf Webseiten eingesetzt, die nicht verlinkt sind. Der Inhalt dieser Bilder und Grafiken sollte in 1-2 kurzen Sätzen als Alternativtext beschrieben werden. Formulierungen wie „auf diesem Bild sehen Sie“ oder „zu sehen ist“ können weggelassen werden. Versuchen Sie sich auf das Wesentliche zu beziehen. Das Bild soll neutral und nicht wertend beschrieben werden. Es gibt einige Bilder, die keinen Alternativtext benötigen. Das sind sogenannte „dekorative Grafiken“. Dazu gehen wir im Abschnitt „Dekorative Grafiken“ gesondert ein.

Typische Fehler

Achten Sie darauf, dass im Alternativtext nicht der Dateiname steht. Ein Dateiname beschreibt das Bild nicht und bietet keine Information. Auch ein Logo soll nicht nur das Wort „Logo“ enthalten. Hier sollte der Name des Logos ergänzt werden. Zum Beispiel „Wappen des Landes Sachsen-Anhalt“. Eine detaillierte Beschreibung ist nicht erforderlich.

Beispiel 1:

Ein Beispiel für den Alternativtext dieses Bildes könnte lauten: „Sanierung einer Straße zwischen historischen Häusern. Straße und Gehwege sind mit vielen Absperrungen voneinander getrennt.“

Beispiel 2:

Für den Fall, dass das Logo nicht verlinkt ist, lautet der Alternativtext hier: „Logo Land Sachsen-Anhalt“.

Verlinkte Bilder und Grafik (Bedienelemente)

Neben nicht verlinkten Grafiken, Fotos und Bildern gibt es noch weitere grafische Elemente auf einer Website, die eine Textbeschreibung benötigen. So müssen etwa Icons und Symbole ebenfalls beschrieben werden. Dies kann zum Beispiel ein Drucker- oder Lupensymbol in einem Suchfeld sein. Hierbei handelt es sich um sogenannte Bedienelemente. Wichtig ist bei Icons und Symbolen, die als Bedienelement (Button) dienen, nur die Aktion zu beschreiben. Also was passiert, wenn der Nutzende auf diesen Button klickt. Bei einem Lupensymbol neben einem Suchfeld kann diese zum Beispiel „Suche starten“ lauten. Eine Beischreibung der Lupe als Alternativtext ist hier nicht erforderlich. Bei verlinkten Grafiken und Bildern muss das Linkziel im Alternativtext erkennbar sein.

Beispiel verlinktes Bild:

Wenn das Logo verlinkt ist, dann könnte der Alternativtext so lauten: „Logo Land Sachsen-Anhalt – zur Startseite“. Das Linkziel wird also am Ende ergänzt.

Beispiel verlinktes Bedienelement:

Der Alternativtext sollte hier lauten: „Suche starten“. Die Aktion, also was nach dem Klick passiert, ist damit beschrieben. Eine Beschreibung der Lupe ist nicht erforderlich.

Dekorative Grafiken

Bei einigen Bildern darf gar kein Alternativtext hinterlegt werden. Dies betrifft dekorative Bilder und Grafiken. Bilder und Grafiken sind dekorativ, wenn sie keine  Informationen enthalten und keine Funktion besitzen. Oft handelt es sich bei solchen Bildern um Platzhalter. Sie dienen nur ästhetischen Zwecken. Das sind zum Beispiel Trennlinien oder ein Bild mit einem Fragezeichen auf der Seite „Häufig gestellte Fragen“. Wenn ein dekoratives Bild verlinkt ist, dann hat es eine Funktion und benötigt einen Alternativtext.

Hinweis zur technischen Umsetzung: Der Alternativtext muss vorhanden, aber leer sein. Im Quellcode würde folglich als Attribut zu sehen sein: alt=““.

Beispiel:

Bei dieser Trennlinie handelt sich um ein Beispiel für eine dekorative Grafik. In diesem Fall muss der Alternativtext leer bleiben. Technische Umsetzung: alt=““.

Icon Font

Symbole und Icons können nicht nur über ein Bild, sondern auch über eine spezielle Schriftart dargestellt werden. Jeder Buchstabe ist dabei mit einem Symbol hinterlegt. Diese Schrift wird „Icon Font“ genannt. Da es sich um eine Schrift und kein Bild handelt, ist es nicht möglich, einen Alternativtext zu hinterlegen. Die Bedeutung des Symbols muss daher auf eine andere Weise beschrieben werden. Dies kann zum Beispiel über eine Beschriftung in direkter Nähe des Symbols erfolgen.

Beispiel:

Neben einem Druckersymbol, das als „Icon Font“ eingebunden ist, befindet sich das Wort „Drucken“. Es ist als Textbeschriftung neben dem Symbol erkennbar. Technischer Hinweis: Symbol und Beschriftung müssen sich im selben „a-Tag“ befinden.

CAPTCHAs

Eine Besonderheit stellen sogenannte bildbasierte CAPTCHAs dar. CAPTCHA ist eine Abkürzung für „Completely Automated Public Turing Test“. Damit lassen sich Computer von Menschen unterscheiden. Vielleicht kennen Sie das Beispiel, vor dem Absenden eines Formulars, in einer Reihe von Bildern alle sichtbaren Zebrastreifen zu markieren. Damit soll verhindert werden, dass das Formular für Spam missbraucht wird. Für sehbehinderte Menschen muss es hierfür eine Alternative geben. Dies kann zum Beispiel per Ton erfolgen. Dabei werden keine Bilder ausgewählt, sondern Ziffern und Buchstaben vorgelesen. Blinde Menschen können diese dann eingeben und so ihre Identität bestätigen. Im Alternativtext muss deutlich werden, dass es sich um ein CAPTCHA handelt und wo die Alternative zu finden ist.

Praktisches Beispiel:

Dieses bildbasierte CAPTCHA bietet eine Audio-Alternative. Der Ton kann über ein Kopfhörer-Symbol oder einen Link abgespielt werden.

Weitere Informationen zu den Anforderungen an Barrierefreiheit

Die Checkliste auf dieser Seite soll Ihnen als erster Einstieg in das Thema dienen. Sie gewährleistet keinen Anspruch auf Vollständigkeit. Zentrale Regelwerke mit weiterführenden Informationen finden Sie:

• in der Europäischen Norm (EN) 301 549 (externes Dokument öffnet in englischer Sprache in neuem Fenster) und
• in der Richtlinie der Web Content Accessibility Guidelines (externer Link öffnet in englischer Sprache in neuem Fenster), kurz WCAG 2.1.

Weitere Informationen zur EN 301 549 und zum Aufbau der WCAG finden Sie auch in unseren Normen und Richtlinien zur Barrierefreiheit.

Erfolgskriterien der WCAG zum Thema Bilder und Grafiken

Die Anforderungen an die Barrierefreiheit sind in den WCAG als Erfolgskriterien festgeschrieben. Ein Thema kann dabei auch in mehrere Erfolgskriterien behandelt werden. Im Folgenden erhalten Sie eine Übersicht der erforderlichen WCAG-Kriterien zum Thema Bilder und Grafiken.

WCAG Erfolgskriterium 1.1.1 „Nicht-Text-Inhalt“ (externer Link öffnet in englischer Sprache in neuem Fenster)