Um Blinden zu vermitteln, was Bilder auf Webseiten zeigen, muss man sie richtig benennen, beschreiben und mit geeigneten Attributen versehen. Was ist zu beachten, um Barrierefreiheit sicherzustellen?
Bilder in HTML einfügen
Um ein Bild in HTML einzufügen, sieht der Quellcode wie folgt aus:
<img src="Pfad_zum_Bild.jpg" alt="Garfield beim Sport" title="Garfield beim Sport" />.“Garfield beim Sport” muss durch die eigene Bildbeschreibung ersetzt werden. Das gilt sowohl für das Alt- als auch für das Title-Attribut.
Erläuterung
- Mit src wird der Pfad angegeben, in dem sich das Bild befindet.
- Mit title wird der Text unter der Maus festgelegt, wenn der Mauszeiger sich auf dem Bild befindet.
- Mit alt wird der Alternativtext festgelegt. Dieser ist zu sehen, wenn das Bild nicht geladen werden kann. Aber auch Screenreader lesen ihn aus.
Wozu das alles?
Das Alt-Attribut
Blinde können nicht sehen, was sich auf einem Bild befindet. Deshalb soll das Alt-Attribut benutzt werden. Es wird auch angezeigt, wenn Bilder - aus welchem Grund auch immer - nicht geladen werden können. Aber was soll dabei beschrieben werden?
Eine kurze, oberflächliche Erläuterung des Bildes ist hier vollkommen ausreichend. Sie soll vermitteln, was auf den ersten Blick wahrgenommen wird. Die Bildbeschreibung sollte dabei nicht länger als 80 Zeichen sein. Diese Zeichenbegrenzung leitet sich aus der maximalen Länge einer gängigen Braillezeile ab. Braillezeilen gibt es im stationären Einsatz mit 40 oder 80 Zeichen. Die Bildbeschreibung sollte sozusagen in eine Zeile passen.
“Eine schwarze Katze liegt gähnend in der Sonne und fühlt sich sichtlich wohl.” Diese Beschreibung passt in das 80-Zeichen-Limit.
Wenn der Alternativtext fehlt, dann ist das Bild für den Screenreader nicht vorhanden. Dabei macht es keinen Unterschied, ob das Alt-Attribut komplett fehlt oder ob es leer gelassen wird. Dateinamen als Alternativtext sind keine zufriedenstellenden Informationen. Diese sind meist lang, kryptisch und sagen nichts über den Inhalt aus.
Title-Attribut
Das Title-Attribut blendet einen Tooltipp ein, wenn der Mauszeiger sich auf dem Bild befindet. Hier verwendet man dieselbe Beschreibung wie im Alt-Attribut. Alles, was darüber hinaus geht, kann als Bildunterschrift gesetzt werden.
Bildunterschrift
Die Bildunterschrift findet sich, wie es der Name vermuten lässt, unter dem Bild. Ihr Zweck ist es, zusätzliche Informationen zur Verfügung zu stellen oder bestimmte Aspekte des Bildes hervorzuheben. Auch Kommentare finden sich häufig in der Bildunterschrift. Eine Bildunterschrift wird folgendermaßen im Quellcode erzeugt:
<figure> <img src="Pfad_zum_Bild.jpg" title="Garfield beim Sport" alt="Garfield beim Sport" /> <figcaption>Garfield hat das Laufen für sich entdeckt. Für den kommenden Berlin-Marathon ist er auch bereits angemeldet.</figcaption> <figure>Die Bildunterschrift ist kein Ersatz für das Alt- oder Title-Attribut!
Alt- und Title-Attribut
Nun stellt man sich die Frage, ob es wirklich Title- und Alt-Attribut braucht. Will man sich für eins von beiden entscheiden, dann ist das Alt-Attribut vorzuziehen. Das wurde in der Vergangenheit oft falsch gemacht, weshalb Screenreader das Title-Attribut auslesen, wenn es kein Alt-Attribut gibt. Getestet wurde das mit JAWS 2020, NVDA 20.3 und dem Narrator von Microsoft. Der technisch richtige Ansatz bleibt aber, das Alt-Attribut zu verwenden. Wenn sowohl Alt- als auch Title-Attribut genutzt werden, gibt der Screenreader ausschließlich das Alt-Attribut aus. Eine Doppelung der Informationen ist also nicht zu befürchten, wenn beides verwendet wird.
Newsletter und andere hübsch gestaltete Mails
Wir kennen es alle: E-Mails, die mit Bildern überfrachtet sind. Die Suche nach der eigentlichen Information kann dann schon etwas dauern.
Screenshot einer Mail mit Bildern ohne ALT IMG Text
Es gibt auch jene Mails, die komplett aus Bildern bestehen, auf denen Text zu sehen ist. Ein führender Tickethändler hat es auf diese Weise geschafft, dass es absolut keine Information gab, die ich aus dem sicher attraktiven Ticketangebot entnehmen konnte. Die Alternativtexte beschränkten sich auf das Wort “Offer”, gefolgt von einer Nummer.
E-Mails barrierefrei zu gestalten, ist somit ebenfalls ein Muss, wenn man ein ernsthaftes Interesse daran hat, Kunden zu erreichen. Der Satz “Blinde sind nicht unsere Zielgruppe” ist leider nach wie vor verbreitet. Aber ob ich als blinder Mensch Interesse an angebotenen Produkten habe, macht sich nicht an der Blindheit fest!
Social Media
Für Social Media gilt, dass Bildbeschreibungen gerne ausführlicher sein dürfen. Insbesondere, da hier Bilder häufiger im Zentrum des Geschehens stehen.
Auf Twitter passiert es oft, dass eine Kombination aus Text und Bild gepostet wird. Das Bild selbst erhält dann allerdings keine Beschreibung. Was bleibt, ist der Text für sich genommen. Der Sinn des Tweets bleibt dadurch verborgen.
Bildbeschreibungen auf Twitter hinzufügen
Twitter selbst bietet eine Anleitung zum Hinzufügen von Bildbeschreibungen.
Die Bildbeschreibung darf hier ausführlicher ausfallen. Man hat bis zu 1000 Zeichen zur Verfügung, die nicht auf das Kontingent des Tweets angerechnet werden.
Dadurch, dass Bildbeschreibungen hinzugefügt werden, wird blinden Nutzenden ein Mehrwert geschenkt. Sie können sich besser beteiligen. Das ist wiederum ein Vorteil für alle.
Bei LinkedIn ist es ebenfalls möglich, Bildbeschreibungen hinzuzufügen - bis zu 120 Zeichen. Zu beachten ist allerdings, dass das nicht von mobilen Endgeräten aus funktioniert. Die Hilfeseite von LinkedIn verrät dazu mehr.
Bei Xing scheint es gar nicht möglich zu sein, Bildbeschreibungen hinzuzusetzen. Außer, man schreibt sie direkt in den Fließtext des Beitrags.
Facebook bietet die Möglichkeit, Bilder automatisch mit Beschreibungen zu versehen, allerdings nur mittels Keywords. So kann eine Landschaftsaufnahme mit den Worten “Baum, Himmel, Wolke” erläutert sein.
Eine manuelle Bildbeschreibung ist daher immer vorzuziehen. Sie könnte beispielsweise die Information vermitteln, ob es sich um ein Foto von einem Wald oder ein Foto von einem einzelnen Baum handelt und damit mehr Kontext liefern.
Was ist eine gute Bildbeschreibung?
Eine gute Bildbeschreibung sollte möglichst kurz das Wesentliche auf den Punkt bringen. Als Leitfaden können diese drei Fragen dienen:
- Was ist auf dem Bild zu sehen?
- Was springt direkt ins Auge?
- Welche Wirkung soll mit dem Bild erzielt werden?
Die Beantwortung der Fragen hängt davon ab, wo dieses Bild verwendet wird. Die Beschreibung eines Gemäldes wird auf einer Seite für Kunstliebhaber anders gestaltet sein als in einem Artikel, in dem das Bild nur schmückendes Beiwerk ist.
Ein detaillierterer Blick auf Bildbeschreibungen folgt in einem separaten Artikel.
Nochmal in Kürze
- Bilder ohne Alt-Attribut sind für Screenreader unsichtbar.
- Das Title-Attribut blendet eine Beschreibung als Tooltipp ein.
- Bildbeschreibungen sollen möglichst knapp sein (80 Zeichen).
- Der Kontext bestimmt, worauf das Augenmerk gelegt wird.
- Alle Kanäle, in denen Bilder verwendet werden, sollen Bildbeschreibungen erhalten.
Screencastdemonstration
Wie es mit einem Screenreader wirkt, wenn kein Augenmerk auf sinnvolle Bildbeschreibungen gelegt wird, zeigt der folgende Screencast.
Screencast: Bilder in HTML