Einstieg in Barrierefreies Webdesign

Eine Binsenweiseit sagt, dass Bilder mehr als tausend Worte sagen. In einem barrierefreien Webdesign muss man auch bedenken, dass es Personen und Anwendungen gibt, die keine Bilder wahrnehmen können, und somit denen diese tausende Wörter vorenthalten werden. Besonders kritisch wird es, wenn man Bilder für die Navigation verwendet, wodurch die Bedienung für sehbehinderte Menschen sehr schwer wird. Zum Glück bietet die Sprache HTML Mittel und Wege, Bilder zum "Sprechen" für den graphikunfähigen Browser zu bringen.

Alternativer Text

Wenn man nun Bildelemente für eine Navigation verwenden möchte, sollte man für Browser, die nicht Bilder anzeigen können, Texte hinterlegen, die ersatzweise für die Bilder wiedergegeben werden können. Für solche Fälle steht das alt - und title - Attribut des img - Elements zur Verfügung. So kann ein Button für einen Link folgendermaßen aussehen.

<a href="startseite.html"><img src="startseite.jpg" alt="Startseite" title="Startseite" /></a>

Da unterschiedliche Browser die alt - und title - Attribute unterschiedlich interpretieren, empfiehlt es sich beide auszufüllen. Die selben Attribute stehen auch für Imagemaps, eine Navigation die auf einem Bild aufgebaut ist, zur Verfügung.

<map name="deutschlandkarte">
<area shape=" poly" coords="10,10,50,50" href="by.html" alt="Bayern" title="Bayern" />
<area ....
</map>

Aber man sollte eine Imagemap auch mit einer entsprechenden Linkliste ergänzen, weil alte Screenreader keine Imagemaps interpretieren. Die ergänzende Liste läßt sich auch mittels CSS für die gängigen Browser ausblenden.

Auch bei Formularelementen, wie Buttons, kann man Bilder einsetzen für die man auch ein Alternativtext einsetzen sollte.

<input type="image" name="login" src="login.gif" alt="Einloggen" />

Dadurch gewinnt man mehr Freiheit in der Gestaltung durch Bilder und gleichzeitig werden Barrieren für andere Browser, die keine Bilder darstellen können, beseitigt. Auch Suchmaschinen können Links und Seiten besser indezieren, wenn sie wissen was genau das Bild bedeutet.

Bei alt - und title - Attribute sollten folgende Dinge beachtet werden:

• Beschreibung kurz und präzise (maximal 80 Zeichen)
• sinnvoller dem Linkinhalt entsprechender Text (kein "Hier klicken" oder ähnliches)
• Bei kleinen Symbolen oder Bildern keine Angaben im width - oder height - Attribut! Dadurch könnten sonst Texte abgeschnitten und nicht lesbar werden!

Beschreibende Seite

Nun reicht ein kleiner Text im alt - oder title - Attribut meistens nicht aus um "tausend Worte" eines Bildes zu umschreiben. Wenn man nun ein Geschehen oder ein Ort oder Details auf einem Bild oder Photo beschreiben möchte, kommt man um eine ausführliche Beschreibung nicht herum. Auch wenn man Diagramme zeigen möchte, ist eine ausführlichere Beschreibung als 80 Zeichen notwendig. Für diese Fälle gibt hat das img - Element das longdesc - Attribut. Das Wort "Longdesc" ist eine englische Abkürzung für "lange Beschreibung" und hat als Inhalt eine Adresse zu einem HTML - Dokument, die den Inhalt des Bildes relativ lang und ausführlich erklärt. Screenreader und Textbrowser können dann die Seite erfassen und den Inhalt auf Wunsch des Anwenders aufrufen. Die "longdesc" - Seite könnte ein Diagramm als sinnvoll aufgebaute Tabelle darstellen, Details eines Gemäldes hervorheben oder ein Comic als eine Art Theaterstück beschreiben.

Leider können nicht alle Screenreader mit dem longdesc - Attribut umgehen. Für solche Fälle legt man am besten einen sogenannten D - Link zusätzlich an, das D steht in diesem Falle für das englische Wort "description", auf deutsch Beschreibung. Danach kann man den Link mittels CSS für graphische Browser ausblenden. Der Quelltext könnte dann so aussehen:

<img src="bilianz2006.gif" alt="Diagramm Bilianz 2006" longdesc="bilianz2006.html">
<!-- D-Link -->
<a href="billianz2006.html" class="unsichtbar" >Detailierte Diagrammbeschreibung</a>

Bilder als Layoutelemente

Wenn man Bilder als Layoutelemente zum Verzieren einsetzen möchte, sollten die alt - und title - Attribute leer sein. Dadurch wird dem Browser mitgeteilt, dass es sich bei dem Bild es sich um eins ohne Kontext handelt. Auch wäre es ein sehr großer Fehler, diesen Attributen Namen zu geben, wie "layout1" oder "verlauf", oder diese Attribute ganz weg zu lassen, da sonst als Alternativtext ein Ersatzwort ausgegeben wird. Solche Alternativtexte verwirren nur den Anwender, wie zum Beispiel die Webseite von eBay Deutschland im Lynx-Browser.

Wie man sieht, werden in diesem Beispiel alle img - Elemente ohne alt - Attribut als "[INLINE]" dargestellt, was auf der ebay Deutschland - Webseite so gut wie alle sind. Und da ja diese Seite sehr "bildlastig" ist, kommt diese Platzhalter sehr oft vor, was den Lesefluss im Textbrowser sehr behindert.

Sinnvoll wäre es auch die Attribute für die Größenangaben, width und height, für ein Bild zu nutzen mit den Werten die der Bildgröße entsprechen. Sollte eventuell das Bild fehlerhaft sein und nicht angezeigt werden können, wird ein leerer Kasten mit den Größen aufgebaut und kann unter Umständen ein Zusammenbrechen des Layouts verhindert werden.

Ein Beispiel:

<img src="rand_mit_verlauf.gif" alt="" title="" width="100" height="10" />

Eine andere Methode um Bilder als Layoutelemente zu nutzen ist das Image-Replacement, in dem Bilder mittels CSS als Hintergrundbilder angelegt werden. Dadurch erreicht man eine striktere Trennung zwischen Inhalt und Layout und kann Effekte wie Wiederholungen ausnutzen. Es wird aber schwieriger mit diesen Bildern Einfluss auf das Verhalten von anderen Inhalten zu bekommen, zum Beispiel wenn ein Text ein Bild umfließen soll. Man muss also mit diesen beiden Methoden Kompromisse schließen wie man Bilder in das Layout einfließen möchte.