In Zeiten der Digitalisierung darf das Thema Barrierefreiheit nicht vernachlässigt werden. Eine Möglichkeit, Menschen mit Einschränkungen den Zugang zu Inhalten im Internet zu erleichtern, sind sogenannte Alternativtexte. Diese Texte sind so gestaltet, dass sie Menschen mit bestimmten Behinderungen die Inhalte einer Website in einer für sie verständlichen Form wiedergeben. Aber: Was genau ist so ein Alternativtext? Wer braucht sie? Und wie kann man einen erstellen?
Um Webseiten und Webinhalte barrierefrei zu gestalten, sind unter anderem Alternativtexte sehr wichtig, um Menschen mit Einschränkungen den Zugang zu erleichtern. Sie vermitteln Informationen und Funktionen für blinde und sehbehinderte Menschen sowie für Menschen mit körperlichen oder kognitiven Einschränkungen. Sie helfen auch, Grafiken, Fotos und 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 es, die verschiedenen Bildtypen richtig zu beschreiben, da sie sich auch in ihrer Funktion unterscheiden. Diese müssen aber erst einmal erkannt werden. Beschreibungen sind nutzlos, wenn sie die Funktion eines Bildes nicht wiedergeben können. Es stellt sich also die Frage: Welche Arten von Bildern gibt es? Und wie kann man sie am besten beschreiben?
Zunächst sollte man sich mit den Unterschieden zwischen den verschiedenen Arten von Grafiken vertraut machen. Dabei ist es wichtig, den Sinn und Zweck einer Grafik zu verstehen. Im Allgemeinen unterscheidet man zwischen informativen, funktionalen und 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 der sichtbare Inhalt einer Grafik durch Alternativtexte vermittelt. Dabei wird auf Informationen geachtet, die für die Aussage des Bildes relevant sind. Ein Beispiel hierfür ist eine Logobeschreibung. Hier wird kurz beschrieben, wie das Logo aussieht und von wem es stammt.
Im nachfolgenden Beispiel wird in HTML eine Textalternative in ein Logo integriert:
<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 eine Bilddatei mit dem img-Element in HTML eingebettet, wobei das src-Attribut die Quelle des Bildes angibt. Die Beschreibung der Grafik wird in Anführungszeichen in die Attribute alt und title eingefügt. Auf diese Weise wird der Textinhalt „Das Eye-Able-Logo. Es stellt ein Auge dar“ über den Screenreader oder die Braillezeile ausgegeben.
Auf diese Weise wird die Barriere beseitigt und alle Menschen, die assistive Technologien nutzen, können verstehen, was in dieser Grafik zu sehen ist.
Diagramme
Handelt es sich jedoch um ein Diagramm, muss dies immer im Einzelfall entschieden werden. Dies hängt oft von der Art und den enthaltenen Informationen ab. Enthält die Grafik nur wenige Informationen, können diese in den Alternativtext aufgenommen werden. Zum Beispiel: „Stellt die Wahlergebnisse der Parteien in einem Balkendiagramm dar. Partei A: 40%, Partei B: 30%, Partei C: 20% usw.“. Wird jedoch etwas Komplexeres oder Längeres dargestellt, empfiehlt es sich, die Detailinformationen in einen nachfolgenden Text einzufügen. Im Alternativtext sollte dann nur die Art und der Zweck des Diagramms angegeben werden. Zusätzlich könnte darauf hingewiesen werden, dass die genauere Beschreibung weiter unten folgt. Ein Beispiel wäre eine Grafik, die Einwohnerzahlen der Bundesländer darstellt. Der Inhalt würde dann lauten: „Stellt die Einwohnerzahlen der 16 Bundesländer in einem Balkendiagramm dar. Hinweis: Die genauere Beschreibung folgt im Text“.
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://services.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 werden in HTML verwendet, um einen Link zu erstellen. In diesem Fall wird der Link auf die Seite https://services.eye-able.com/ erstellt. Im img-Element sehen wir wieder das Logo von Eye-Able, aber diesmal beschreiben die alt- und title-Attribute nicht die Grafik, sondern die Funktion. So wird nun der Inhalt „Startseite von Eye-Able“ über die assistiven Technologien ausgegeben.
Dasselbe gilt für Symbole. 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 verhält es sich mit Schaltflächen. Ein Button, der einen Pfeil nach rechts darstellt, sollte niemals im Alternativtext mit „Pfeil nach rechts“ hinterlegt werden. Für einen sehenden Menschen ist klar, dass sich die nächste Seite öffnet, wenn man darauf klickt, für blinde Menschen jedoch nicht. Denn sie hören über die Sprachausgabe nur „Pfeil nach rechts“. Das ist nicht eindeutig genug bzw. lässt nicht erkennen, dass sich bei Betätigung des Buttons die nächste Seite öffnet. Daher ist es sinnvoller, diese Alternativtexte mit „zur nächsten Seite“ oder „weiterblättern“ zu hinterlegen.
Dekorative Bilder
Eine weitere Art von Grafiken sind dekorative Bilder. Diese werden zur Dekoration einer Webseite verwendet. Die Vorgehensweise bei der Erstellung von Alternativtexten ist hier sehr einfach. Hier wird der Inhalt des Alternativtextes leer gelassen. Wichtig ist, dass das Attribut der Alternativtexte trotzdem vorhanden ist. Nur der Textinhalt bleibt hier frei. Dies hat zur Folge, dass der Screenreader diese irrelevante Grafik bei der Ausgabe überspringt.
Wie schreibt man gute Alternativtexte?
Nachdem nun die verschiedenen Grafiken vorgestellt wurden, stellt sich nur noch eine Frage: „Wie formuliert man optimale Alternativtexte?“ Wenn man all diese Feinheiten und Unterschiede der Bilder kennt, gibt es nur noch wenige Regeln zu beachten. Die folgenden Hinweise können dabei helfen:
- Beginn einer Textalternative:
Hier ist darauf zu achten, dass keine Dopplungen entstehen. Der Anfang sollte also nicht mit: „Das Bild …“, „Die Grafik …“, „Das Foto …“ oder „Der Link“ … beginnen. Ob es sich um eine Grafik oder einen Link handelt, wird von Screenreadern ohnehin erkannt und ausgegeben. Daher sollte darauf verzichtet werden.
Länge der Texte:
Wie lang ein Alternativtext sein sollte, ist nicht festgelegt. Für die Beschreibung einer Grafik sollten jedoch ein bis zwei Sätze ausreichen. Ideal sind 80 Zeichen. Warum 80? Blinde Menschen lesen diese Texte oft mit Hilfe einer Braillezeile. Braillezeilen können zwischen 40 und 80 Zeichen auf einmal ausgeben. Aus Gründen der Übersichtlichkeit ist es daher ratsam, sich an diese Begrenzung zu halten. Natürlich kann ein Text auch länger sein. Er sollte jedoch 120 Zeichen nicht überschreiten.
Rechtschreibung und Zeichensetzung:
Auf eine korrekte Rechtschreibung ist zu achten. Wenn ein Wort einen Rechtschreibfehler enthält, kann es schnell zu Unklarheiten kommen, da ein Screenreader genau das ausgibt, was im Alternativtext hinterlegt ist. Ebenso spielt die korrekte Grammatik eine wichtige Rolle für das Verständnis von Bildern. 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.
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 Information uninteressant, da in einer Bildbeschreibung nur das Wichtigste steht. Deshalb sollte diese Information weggelassen werden.
Feedback:
Ob die Bildbeschreibung gelungen ist, lässt sich schnell feststellen. Aber wie? Diese Frage ist einfach zu beantworten. Dazu ist kein großer Aufwand nötig. Ein kurzes Feedback einer blinden oder sehbehinderten Person gibt Aufschluss darüber, ob der Textinhalt sinnvoll formuliert wurde. Aber nicht jeder kennt einen Menschen mit einer Augeneinschränkung. Das kann man auch anders lösen. Jeder, der das Bild noch nicht gesehen hat, kann hier befragt werden. Dies kann hier natürlich schriftlich, aber auch telefonisch geschehen. Sobald hier eine „positive“ Rückmeldung kommt, ist die Beschreibung gelungen.
Was passiert eigentlich, wenn Alternativtexte fehlen?
Das Fehlen von Alternativtexten zu Bildern kann insbesondere für blinde Nutzende ärgerlich sein. Dies würde nämlich bewirken, dass sie den Inhalt der Grafik nicht mitbekommen. Gleichzeitig würde der Screenreader in so einem Fall nur den Dateinamen ausgeben, wie zum Beispiel: „img123.jpg“. Mit solch einer Beschreibung wäre niemanden geholfen. Entwickler sollten daher immer darauf achten, Textinhalte zu verwenden. Wichtig ist aber auch, die Unterschiede zu kennen, um Bilder und Grafiken sinnvoll beschreiben zu können. Assistierende Technologien können diese dann mit Hilfe der Textalternativen wiedergeben. Dadurch wird auch das Internet für alle ein Stück barrierefreier.
