Wie ein barrierefreies Lesen von Bildern möglich ist!

Teilen ist erwünscht:

Brille die auf einem Buch liegt

In Zeiten der Digitalisierung darf das Thema Barrierefreiheit nicht zu kurz kommen. Eine Möglichkeit Menschen mit Einschränkungen den Zugang zu den Inhalten im Internet zu erleichtern, bieten sogenannte Alternativtexte. Diese Texte sind so gestaltet, dass sie Menschen mit bestimmten Behinderungen den Inhalt einer Website für sie verständlich wiedergeben können. Aber: Was genau ist so ein Alternativtext? Wer braucht sie?  Und wie kann man einen erstellen?

Um barrierefreie Webseiten und Webinhalte zu entwickeln sind unter anderem Alternativtexte sehr wichtig, um den Zugang für Menschen mit Einschränkungen zu erleichtern. Diese vermitteln Informationen und Funktionen für blinde und sehbehinderte Menschen, sowie Menschen mit körperlichen oder kognitiven Einschränkungen. Sie helfen außerdem Grafiken, Fotos und auch Bedienelemente zu verstehen. Screenreader oder Braillezeilen verwenden die Textalternativen und machen diese Elemente so für Menschen mit Behinderungen zugänglich.

Andererseits sind sie auch nützlich für die Suchmaschinenoptimierung. Die Textalternativen übertragen den Suchmaschinen die Information über ein Bild. Dadurch wird die Auffindbarkeit verbessert.

Wie erstellt man Textalternativen?

Die Antwort auf die Frage, wie man eine Textalternative erstellt, ist ganz einfach: Dazu wird nur im entsprechenden Bereich eines Elements, welches mit einem solchen Text versehen wird, ein alternativer Text eingefügt. Die meisten Entwickler wenden das in einem sogenannten CMS an. Die Abkürzung CMS steht für Content Management System. Dies ist eine Software, die für die Erstellung und Verwaltung von Webinhalten genutzt wird.

Die Programmiersprache HTML kann auch dafür verwendet werden. Da kommt das alt-Attribut oder auch alt-Tag genannt ins Spiel. Dort wird sie innerhalb des img-Tags eingefügt. Im inneren Bereich des alt-Attributs wird der Text geschrieben, der dann über die assistierenden Technologien ausgegeben wird.

Das allein reicht aber nicht aus. Auch das title-Attribut sollte nicht vergessen werden, da es Screenreader gibt, die nicht die Beschreibung des alt-Attribut auslesen, sondern die des title-Attributs. Daher macht es auch Sinn, bei beiden Tags einen identischen Text anzugeben. Zudem hat dies auch die Funktion, den Inhalt als zusätzliche Information über ein Element einzublenden, wenn man mit der Maus über den Bereich rüberfährt.

Darüber hinaus gibt es noch das aria-Attribut. Genauer gesagt das aria-label-Attribut oder auch das aria-labelledby-Attribut. Diese werden zur Beschriftung von Buttons oder Formularfeldern verwendet.

Die verschiedenen Bildarten

In einer Welt, in der wir uns immer mehr digitalisieren, reicht nicht nur die Erstellung von Textalternativen. Viel effektiver ist nämlich die richtige Beschreibung der verschiedenen Bildarten, da sie sich auch in der Funktion unterscheiden. Diese müssen aber erst einmal erkannt werden. Beschreibungen sind sinnlos, wenn sie nicht den Zweck einer Grafik wiedergeben können. Deshalb stellt sich die Frage: Welche Arten von Bildern gibt es? Und wie formuliert man sie am besten?

Zuerst sollte man sich mit den einzelnen Unterschieden der Grafiken vertraut machen. Hierbei ist es wichtig, den Sinn und den Zweck einer Grafik zu verstehen. Generell unterscheidet man zwischen informativen, funktionalen oder dekorativen Grafiken. Daneben gibt es noch die sogenannten Schriftbilder. Hier ist die Beschreibung sehr einfach, man übernimmt hier einfach nur den Text, der in der Grafik zu sehen ist.

Informative Bilder

Bei den informativen Bildern wird über die Alternativtexte der sichtbare Inhalt einer Grafik vermittelt. Dabei achtet man auf die Informationen, die für die Bildaussage relevant sind. Ein Beispiel hierfür ist eine Logobeschreibung. Hier wird kurz beschrieben, wie das Logo aussieht und von wem das Logo ist.

Im nachfolgenden Beispiel wird in HTML eine Textalternative in ein Logo integriert:

Das Eye-Able Logo. Es stellt ein Auge dar.

<img

src=“logo.jpg“

alt=“Das Eye-Able Logo. Es stellt ein Auge dar.“

title=“Das Eye-Able Logo. Es stellt ein Auge dar.“>

</img>

Hier wird mit dem img-Element in HTML eine Bilddatei eingebunden und das src-Attribut bestimmt die Bildquelle. Die Beschreibung der Grafik wird in Anführungszeichen in das alt- und title-Attribut eingefügt. Somit wird der Textinhalt „Das Eye-Able Logo. Es stellt ein Auge dar“ über den Screenreader oder der Braillezeile ausgegeben.

Dadurch wird die Barriere beseitigt und alle Nutzenden von assistierenden Technologien erfahren, was in dieser Grafik zu sehen ist.

Diagramme

Handelt es sich hier aber um ein Diagramm, sollte dies immer individuell entschieden werden. Das hängt oft von der Art und den enthaltenen Informationen ab. Besteht die Grafik nur aus wenigen Infos, kann das mit in den Alternativtext untergebracht werden. Zum Beispiel: „Zeigt die Wahlergebnisse der Parteien in einem Balkendiagramm. Partei A: 40 %, Partei B: 30 %, Partei C: 20 % usw.“. Wird aber etwas Komplexes oder Längeres dargestellt, empfiehlt es sich die detaillierten Infos in einem nachfolgenden Text einzufügen. Hier sollte dann nur noch die Art und der Zweck des Diagramms mit in den Alternativtext aufgenommen werden. Zusätzlich könnte man noch darauf hinweisen, dass nachfolgend die genauere Beschreibung folgt. Ein Beispiel dafür wäre, wenn die Grafik die Einwohnerzahlen der Bundesländer abbilden würde. Dann würde der Inhalt wie folgt lauten: „Zeigt die Einwohnerzahlen der 16 Bundesländer in einem Balkendiagramm. Hinweis: Die detaillierte Beschreibung wird im nachfolgendem Text beschrieben.“.

Funktionale Bilder

Als nächstes betrachten wir die funktionalen Bilder. Das sind verlinkte Grafiken. Man unterteilt sie in Links, Elemente oder Buttons. In den Textalternativen wird die Funktion definiert und nicht was zu erkennen ist. Stattdessen gibt man an, wohin der Link führt.

Hier ist so ein Beispiel in HTML für eine verlinkte Grafik:

<a href=“https://eye-able.com/“>

<img src=“logo.jpg“

alt=“Startseite von Eye-Able“

title=“Startseite von Eye-Able“

</img>

</a>

Der a-Tag und das href-Attribut wird in HTML zur Erstellung eines Links benutzt. In diesem Fall wird der Link zur Seite https://eye-able.com/ erstellt. Im img-Element sieht man wieder das Logo von Eye-Able, aber diesmal wird in den alt und title-Attributen nicht die Grafik, sondern die Funktion beschrieben. Also wird jetzt über die Hilfstechnologien der Inhalt „Startseite von Eye-Able“ ausgegeben.

Genauso ist es bei Symbolen. Beispielsweise wenn eine Diskette verwendet wird, ist das Aussehen des Symbols für die Ausgabe mit einem Screenreader nicht relevant, da damit die Funktion des Speicherns symbolisiert wird. Ein weiteres Beispiel sind Such-Icons. Ob es sich hier um eine Lupe handelt, spielt keine Rolle. Viel interessanter ist nämlich die Aktion dahinter. Damit werden eine Suchoption bzw. der Start einer Suche abgebildet.

Ähnlich ist es auch bei Buttons. Ein Button, der einen Pfeil nach rechts darstellt, sollte nie in den Alternativtext mit „Pfeil nach rechts“ hinterlegt werden. Für eine sehende Person ist es zwar klar, dass sich die nächste Seite öffnet, wenn man daraufklickt, für blinde Menschen dagegen nicht. Denn über die Sprachausgabe hören sie nur „Pfeil nach rechts“. Dies ist nicht eindeutig genug bzw. damit ist nicht erkennbar, dass sich bei Ausführung des Buttons die nächste Seite öffnet. Deswegen macht es mehr Sinn, diese Alternativtexte mit „zur Nächsten Seite“ oder „weiterblättern“ zu hinterlegen.

Dekorative Bilder

Eine weitere Art von Grafiken sind die dekorativen Bilder. Diese werden zur Dekoration einer Webseite genutzt. Die Vorgehensweise zur Erstellung von Alternativtexten ist hier sehr einfach. Hier wird der Inhalt der Textalternative leer gelassen. Wichtig ist dabei, dass das Attribut der Alternativtexte trotzdem vorhanden ist. Nur der Textinhalt bleibt hier frei. Dies hat nämlich die Auswirkung, dass der Screenreader bei der Ausgabe diese irrelevante Grafik überspringt.

Wie schreibt man gute Textalternativen?

Nachdem nun die unterschiedlichen Grafiken vorgestellt wurden, stellt sich dann nur noch eine Frage: „Wie formuliert man optimale Alternativtexte?“ Wenn man all diese Feinheiten und die Unterschiede der Bilder weiß, sind es nur noch wenige Regeln, die einzuhalten sind. Dazu können folgende Hinweise beachtet werden:

  1. Beginn einer Textalternative:

    Hier ist darauf zu achten, dass keine Verdopplung entsteht. Also sollte der Anfang nicht mit: „Das Bild …“, „Die Grafik …“, „Das Foto …“ oder „Der Link“ … beginnen. Ob es sich hier um eine Grafik oder ein Link handelt, wird von den Screenreader sowieso erkannt und ausgegeben. Deswegen sollte darauf verzichtet werden.

  2. Länge der Texte:

    Wie lang ein Alternativtext sein sollte, ist nicht festgelegt. Aber um eine Grafik zu beschreiben, sollten eins bis zwei Sätze reichen. Idealerweise sind es 80 Zeichen. Warum gerade 80? Blinde Menschen lesen diese Texte oftmals mithilfe einer Braillezeile. Braillezeilen können zwischen 40 und 80 Zeichen auf einmal ausgeben. Zur besseren Übersichtlichkeit für die Nutzenden ist es daher ratsam, auf diese Begrenzung zu achten. Natürlich kann ein Text auch mal länger ausfallen. Jedoch sollte dieser nie mehr als 120 Zeichen betragen.

  3. Rechtschreibung und Zeichensetzung:

    Auf eine korrekte Rechtschreibung ist zu achten. Wenn ein Wort einen Rechtschreibfehler enthält, kann es schnell zu Unklarheiten kommen, denn ein Screenreader gibt genau das aus, was im Alternativtext hinterlegt ist. Genauso spielt die richtige Grammatik für das Verständnis von Bildern eine wichtige Rolle. Aber auch die korrekte Zeichensetzung ist dabei relevant. Falsche oder fehlende Satzzeichen erschweren es nämlich den Zuhörenden, die Grafik zu verstehen. Aufgrund dessen sollte vor dem Einfügen der Textinhalte eine Rechtschreib- und Grammatikprüfung durchgeführt werden.

  4. Urheberrechte:

    Viele Grafiken besitzen einen Urheberrechtsnachweis. Doch ist diese Information für das Verständnis eines Bildes wichtig? Die Antwort lautet: Nein! Für eine gute Formulierung von Textalternativen ist diese Info uninteressant, da nur das Wichtigste in einer Bildbeschreibung untergebracht wird. Daher sollte man diese Information weglassen.

  5. Feedback:

    Ob die Bildbeschreibung erfolgreich war, lässt sich schnell herausfinden. Wie? Die Frage lässt sich ganz einfach beantworten. Dazu muss auch nicht viel Aufwand betrieben werden. Ob ein Textinhalt sinnvoll verfasst wurde, ist mit einem schnellen Feedback einer blinden oder sehbehinderten Person aufgeklärt. Doch nicht jeder kennt eine Person mit einer Augeneinschränkung. Dies kann man aber auch anders lösen. Jeder Mensch, der das Bild noch nicht vor sich hatte, kann hier befragt werden. Das kann hier natürlich schriftlich, aber auch telefonisch ermittelt werden. Sobald hier eine „positive“ Rückmeldung kommt, ist die Beschreibung gelungen.

Was passiert eigentlich, wenn Alternativtexte fehlen?

Wenn keine Alternativtexte bei Bildern vorhanden sind, kann dies vor allem für blinde Nutzende ärgerlich sein. Dies würde nämlich bewirken, dass sie den Inhalt der Grafik nicht mitbekommen. Gleichzeitig würde der Scrrenreader in so einem Fall nur den Dateinamen ausgeben, wie zum Beispiel: „img123.jpg“. Mit solch einer Beschreibung wäre niemanden geholfen. Entwickler sollten deshalb immer darauf achten, Textinhalte einzusetzen. Wichtig dabei ist aber auch die Unterschiede zu kennen, um die Bilder und Grafiken sinnvoll beschreiben zu können. Assistierende Technologien können dies dann mit Hilfe der Textalternativen wiedergeben. Dadurch wird auch das Internet für alle ein Stück barrierefreier.

Einfach für alle

Interesse geweckt? Wir helfen Ihnen gerne weiter.​

Mit über 25 Funktionen rund um die digitale Barrierefreiheit hilft Eye-Able auch Ihnen dabei, Ihre Barrieren nachhaltig zu reduzieren. So machen Sie Ihre Informationen zugänglich für alle und schließen keine Besucher*innen aus – kurzum: Sie erschließen eine neue Zielgruppe, ganz ohne hohe Marketing-Volumina.

Icon zeigt Barrierefreiheit-Figur

Beratungsgespräch

Unverbindliches Beratungsgespräch zur digitalen Barrierefreiheit im Allgemeinen

Icon zeigt Barrierefreiheit-Figur

Analyse

Erörterung möglicher Optimierungspotentiale auf Ihrer Website​

Icon zeigt Barrierefreiheit-Figur

Live-Demo

Vorstellung der Assistenzsoftware direkt auf Ihrer Website​

Weitere Beiträge

Falls es etwas mehr sein darf:

cathedral of cologne

Eye-Able erreicht den Rhein

Eye-Able erreicht neue Ufer. Von der Heimatstadt Würzburg am Main, ab an den Rhein! Die Stadt Köln leistet ab sofort ihren Beitrag und macht ihre