Bilder barrierefrei einbinden

Welche Bilder müssen unterschieden werden?

„Ein Bild sagt mehr als tausend Worte.“ Dieses Sprichwort gilt auch oft im Web. Bilder sind für eine Website oft genauso wichtig wie der restliche Inhalt. Sie können Emotionen vermitteln oder Sachverhalte darstellen und verdeutlichen. Für die Barrierefreiheit ist es allerdings wichtig, dass Bilder für seheingeschränkte und blinde Nutzer umschrieben und ausgezeichnet werden.

Bilder im Web lassen sich prinzipiell in zwei Kategorien aufteilen:

• Inhaltliche Bilder – Diese Bilder transportieren wichtige Informationen oder veranschaulichen das gewählte Thema eines Artikels zusätzlich. Diese Bilder können Nachrichtenbilder, Infografiken oder auch, wie auf dieser Website zu finden, Screenshots von Programmen und WordPress-Funktionen sein.
• Dekorative Bilder – Diese Bilder haben keinen informellen Zweck, sondern dienen lediglich der Gestaltung der Website. Logos, Hintergrundbilder oder grafische Trenner sind häufig anzutreffen und zählen zu dieser Kategorie. Allerdings kann beispielsweise auch eine Infografik dann lediglich dekorativer Natur sein, wenn sie bereits vorhandenen Text nur noch einmal wiederholt und darüber hinaus keine neuen Informationen transportiert.

Welche Auszeichnungen für Bilder gibt es im Web?

Bilder werden mithilfe des HTML-Tag <img> auf einer Website eingebunden. Dafür gibt es verschiedene Attribute, mit denen sich das Bild weiterhin beschreiben lässt:

• alt : Der Alternativtext eines Bildes.
• title : Der Titel eines Bildes.

Der Alternativtext (oder auch Alt-Text) ist normalerweise nicht auf der Website sichtbar, sondern ist stattdessen für einen Screenreader bestimmt. Ursprünglich wurde er eingeführt, falls ein Bild nicht lädt oder aus einem anderen Grund blockiert wird. In diesem Fall wird auch heute noch statt der Alt-Text statt dem Bild angezeigt.

Der Titel wiederum wird dann sichtbar, sobald mit dem Mauszeiger über das Bild gefahren wird. Dabei müssen allerdings nicht beide Attribute verwendet werden. Sollte kein Titel für ein Bild gewünscht sein, lässt sich auch nur der Alternativtext ausfüllen. Auf diese Weise stört der Titel nicht und Screenreader-Nutzer können sich trotzdem auf den Alternativtext verlassen. Werden beide Attribute ausgefüllt, wird nur eines vom Screenreader vorgelesen. Der gleiche Text für Alternativtext und Titel ist also kein Problem. Für eine barrierefreie Website kann man sich also merken: zumindest der Alternativtext sollte immer ausgefüllt werden.

Zusätzlich gibt es auch Bildunterschriften. Diese werden allerdings wie ein ganz normaler Absatz meist unter dem Bild angebracht und sind deshalb ohnehin für alle Benutzer sichtbar. Wird diese zusätzlich benutzt, sollte sie nach Möglichkeit nicht die gleichen

Beispiel:

<img src="bild.jpg" alt="Dies ist eine detaillierte Beschreibung, was auf dem Bild zu sehen ist.">

Was ist bei Alternativtexten zu beachten?

Lange und kurze Alternativtexte

Der Alternativtext sollte stets so kurz wie möglich und so lang wie nötig ausfallen. Da es hier stark auf den Kontext ankommt, ist eine generelle Regelung für Bildbeschreibungstexte nur schwer möglich. Ist es ein Landschaftsbild und es geht darum, eine Stimmung zu transportieren? Ist es ein Bild für einen Newsbeitrag und relevant ist nur die einfache Namensnennung der abgebildeten Personen und der Ort? Diese Fragen müssen für jedes Bild zuerst geklärt werden.

Sollte jedoch Text im Bild zu sehen sein, sollte er unbedingt im Wortlaut durch den Alternativtext wiedergegeben werden, da Texte innerhalb von Bildern nicht von Screenreadern erfasst werden können.

Auch die Position des Bildes auf der Website kann eine Rolle spielen. Bilder mitten im Fließtext, die einen langen Alternativtext enthalten, können beim Vorlesen des eigentliches Inhalts eine eher störende Wirkung haben. Wieviele Details des Bildes im Alternativtext vorkommen sollen, muss auch aus diesem Grund von Fall zu Fall betrachtet werden.

Korrekte Rechtschreibung

Prinzipiell sollte bei der Erstellung eines Alternativtextes auf fehlerfreie Rechtschreibung und auch auf korrekte Satzzeichen geachtet werden. Beides erleichtert das Verständnis bei der Benutzung eines Screenreaders, da diese in der Regel alles genau so vorlesen, wie sie es auffinden.

„Bild von“ und „Foto von“ sind unnötig

Screenreader informieren den Nutzer eigenständig, wenn sie auf ein Bild stoßen. Es muss also nicht zusätzlich explizit darauf hingewiesen werden, dass es sich um ein Bild handelt. Im Gegenteil, der doppelte Hinweis kann im Vorlesefluss sogar stören.

Bilder mit Links

Bilder, die auf eine andere Seite verlinken, müssen eine Link-Beschreibung im Alternativtext enthalten, beispielsweise: „Link: Zu meinem neuen Artikel“. Wie bereits erwähnt, können Texte auf Bildern nicht gelesen werden. Entsprechend muss das Link-Ziel des Bildes eindeutig beschrieben sein.

Hintergrundbilder und Platzhaltergrafiken

Hintergrundgrafiken sind nach wie vor eine beliebte Methode, um stilistische Elemente auf Websites einzubauen. Farbverläufe oder Illustrationen finden immer wieder Verwendung, um die Website optisch aufzuwerten, Bereiche abzugrenzen oder Emotionen zu vermitteln. Platzhaltergrafiken stammen dagegen noch aus einer Zeit, in der Websites zum Großteil mit tabellarischen Layouts erstellt wurden. Seit dem Einzug von CSS gibt es kaum noch Gründe, warum Layout-Elemente im HTML-Markup vorhanden sein sollten.

Sollten Bilder als rein stilistisches Element Anwendung finden, sollte für sie zwar ein Alternativtext angegeben, aber leer gelassen werden. Sollte ein Screenreader keinen Alt-Text oder Titel vorfinden, liest er in vielen Fällen einfach den Dateinamen vor, was keinesfalls sinnvoll ist.

Beispiel:

<img src="bild.jpg" alt="">

Fazit

Mit relativ wenig Aufwand lassen sich Bilder also selbst für blinde oder seheingeschränkte Nutzer auf jeder Website effektiv nutzen. Wichtig ist es nur, die nötigen Maßnahmen stets im Hinterkopf zu behalten und sich um den Kontext der Bilder Gedanken zu machen. Zu entscheiden, welche Informationen für ein Bild wichtig sind und welche außen vor gelassen werden können, ist hierbei wahrscheinlich meist die schwierigste Disziplin. Bilder aber überhaupt und fast schon instinktiv mit Alternativtexten oder Titeln zu versehen, ist oft bereits schon der wichtigste Schritt.