Dieser Artikel widmet sich der Barrierefreiheit von Bildern in HTML. 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

Wozu das alles?

Das Alt-Attribut

Blinde sind nicht in der Lage zu 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 Beschreibung des Bildes ist hier vollkommen ausreichend. Die Beschreibung soll das vermitteln, was auf den ersten Blick wahrgenommen wird. Die Bildbeschreibung sollte dabei nicht länger als 80 Zeichen sein. Die 80 Zeichen leiten sich aus der maximalen Länge einer gängigen Braillezeile her. 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 die selbe 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 bzw. Aspekte des Bildes hervorzuheben. Auch Kommentare zum Bild 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 zu nutzen. Das wurde in der Vergangenheit oft falsch gemacht, weshalb Screenreader auch 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 nutzen. Wenn sowohl das Alt-Attribut als auch das Title-Attribut genutzt wird, 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 mit Bildern überfrachteten Mail

Es gibt auch solche Mails, die komplett aus Bildern bestehen, auf denen Text zu sehen ist. Ein führender Tickethändler hat es so geschafft, dass es absolut keine Information gab die ich aus dem sicher ansprechenden Ticketangebot ziehen konnte. Die Alternativtexte beschränkten sich auf das Wort “Offer” gefolgt von einer Nummer.

E-Mails barrierefrei zu gestalten ist also 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.

Twitter

Auf Twitter passiert es häufig, dass eine Kombination aus Text und Bild gepostet wird. Das Bild selbst erhält dann allerdings keine Bildbeschreibung. 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, das Bildbeschreibungen hinzugefügt werden, wird blinden Nutzenden ein Mehrwert geschenkt. Sie können sich häufiger beteiligen. Das ist wiederum ein Vorteil für alle.

LinkedIn

Bei LinkedIn ist es ebenfalls möglich, Bildbeschreibungen hinzuzufügen (120 Zeichen). Zu beachten ist allerdings, dass das nicht von mobilen Endgeräten aus funktioniert. Die Hilfeseite von LinkedIn verrät dazu mehr.

XING

Bei Xing scheint es gar nicht möglich zu sein, Bildbeschreibungen hinzuzufügen. Außer, man schreibt sie direkt in den Fließtext des Beitrags.

Facebook

Facebook bietet die Möglichkeit Bilder automatisch mit Beschreibungen zu versehen. So eine Beschreibung besteht allerdings nur aus Keywords. So kann eine Landschaftsaufnahme mit “Baum, Himmel, Wolke” beschrieben werden.

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:

Die Beantwortung der Fragen hängt davon ab, wo dieses Bild verwendet wird. Die Bildbeschreibung 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

Screencastdemonstration

Wie es mit einem Screenreader wirkt, wenn kein Augenmerk auf sinnvolle Bildbeschreibungen gelegt wird, zeigt der folgende Screencast.

Noch Fragen?

Weitere Artikel zum Thema Bildbeschreibungen sowie einen Ausblick in die Zukunft wird es auf unserem Blog geben. Bei Fragen und Interesse bin ich unter 030 280 400 zu erreichen.

Dennis Westphal

Weitere interessante Artikel