Platzhalter-Grafiken

Bilder spielen im Internet eine wachsende Rolle, auch wenn die Bildsprache nicht immer sinnvoll ist. Das Thema Bilder spielt bisher im Barrierefreiheitsdiskurs eine eher untergeordnete Rolle, weshalb ich das einmal angehen möchte.
Zunächst einmal vorneweg: Barrierefreiheit wird nicht nur für Blinde und Sehbehinderte gemacht. Abgesehen davon, dass Sehbehinderung so ziemlich alles zwischen 10 und 100 Prozent Sehrest sein kann, man denke an eingeschränkte Gesichtsfelder, erfreuen sich alle an sinnvollen, den Gehalt einer Website ergänzenden und auflockernden Bildern und Graphiken. Es ist nicht jeder Menschen Sache, sich durch Textwüsten zu quellen.

Bilder barrierefrei verwenden

View more presentations from Domingos de Oliveira.

Zwei Arten von Bildern

Es lassen sich zwei Arten von gestalterischen Bildern unterscheiden.

  • Platzhalter
  • dekorative Bilder

Ich verwende hier die Begriffe Bilder und Graphiken synonym. Was verbirgt sich hinter diesen obskuren Bezeichnungen?
Platzhaltergraphiken sind kleine unsichtbare Bilder. Sie sind zumeist 1 Pixel groß und dienen zur Stabilisierung einer Layout-Tabelle. Layout-Tabellen sind die Lieblinge schlechter Webdesigner – man muss es leider sagen – und sind noch lange nicht ausgestorben. Für Blinde ist es eine reine Tortur, solche Seiten mit einem Screenreader zu erkunden, denn alles, was sie hören ist: „Tabelle mit 2 Spalten und 2 Reihen, Spalte 1, Reihe 1, Spalte 1, Reihe 2, Spalte 2…“ und das tolle an Layout-Tabellen ist, dass sich in diesen für Sehende unsichtbaren Spalten gar nichts befinden muss – aber es könnte was drin sein. Für eine komplexe Website braucht man eine ganze Reihe solcher Konstrukte, so dass ich dafür garantieren kann, dass der Blinde Nutzer nach dem ersten Besuch nie wiederkommen wird.
Weil die Browser mit leeren Tabellen nichts anfangen können – wer käme denn schon auf die Idee, leere Tabellen zu verwenden, müssen hier oft Spacer-Gifs verwendet werden, damit das ganze Layout nicht kollabiert.
Dekorative Graphiken sind dann schon nützlicher. Das sind Bilder, die – wer hätte es gedacht – dekorativ sind, also keine Aufgabe erfüllen, aber die seite oft aufhübschen sollen. Es sind fast immer Graphiken, die auf jeder Seite eines Webauftritts vorkommen und sich dort immer auf der gleichen Position befinden: Banner, Logo, Hintergrundbilder.
Diese Graphiken sind äußerst nützlich: sie sollten auf einen Blick verraten, auf wessen Webauftritt man sich gerade befindet, erhöhen den Wiederkennungswert ungemein und vermitteln deshalb Sicherheit und Orientierung – nützlich für Menschen mit Lernschwierigkeiten. Außerdem verhindern sie nebenbei, dass auch der letzte Platz mit Funktionalität zugepflastert wird.

Über alts und long descs

Grundsätzlich gibt es drei Attribute, mit denen das Image-Tag beschrieben werden kann: alt = Alternativtext, long desc = long description, title = Titel.
Wer die letzte Macromedia-Version des Dreamweaver verwendet hat, kennt die lange Beschreibung vielleicht noch. Ansonsten wird die long desc kaum noch verwendet und wird in HTML5 abgeschafft. Sie sollte ursprünglich dazu dienen, längere Beschreibungen für Screenreader unterzubringen. Alternativ-Texte sind mittlerweile fast Standard und dienen vor allem blinden Screenreader-Nutzern. Was sie enthalten sollten, wird im nächsten Beitrag behandelt. Der Titel erscheint, wenn man mit dem Maus-Cursor über ein Bild fährt. Es gibt noch die Bildunterschrift, die aber als normaler Text unterhalb des Bildes untergebracht wird und für alle Nutzer ohne weiteres sichtbar ist.
Spacer-Gifs brauchen keinen Alternativ-Text. Allerdings wissen die Screenreader nicht, welche Graphiken nützlich sind und welche nicht. Sie lesen daher den Dateinamen in der Hoffnung vor, er möge Sinn machen. Was sich hinter der Datei as131412112.gif verbirgt, erschließt sich dem Blinden allerdings nicht. Ein einfacher und übrigens auch HTML-valider Weg ist es, das Alt-Tag zu verwenden, es aber leer zu lassen:img src="as131412112.gif" alt="". Der Screenreader ignoriert die Graphik in diesem Fall.
Bei dekorativen Graphiken kann es nicht schaden, eine kurze Beschreibung zu verwenden. Das Minimum ist „Logo von XY“. Besser ist „Logo von XY, ein Schneemann mit einem schwarzen Hut“, viele Blinde kann das tatsächlich interessieren, die anderen ignorieren es einfach. Auch Sehbehinderte möchten eventuell wissen, was auf dem Logo oder dem Banner zu sehen ist, so dass man einen dem Alt-Text ähnlichen title formulieren kann, Sehbehinderte nutzen oft lieber die Maus als die Tastatur.
Die Betonung liegt hier auf kurz: Kleine Romane in den Image-Tags unterzubringen wirkt unprofessionell. Im nächsten Beitrag werde ich mich mit inhaltlichen und funktionalen Graphiken beschäftigen.