Barrierefreies Webdesign

Im Folgenden lernen Sie anhand der drei Themen Grafiken, Frames und Tabellen, wie Sie einige grobe Barrieren auf Ihren Internetseiten verhindern können. Die vorgestellten Maßnahmen sind in den meisten Fällen problemlos umzusetzen und tragen ganz erheblich zur Zugänglichkeit bei.

Sie lernen auch gleich einige wichtige Richtlinien sowohl des WAI als auch der BITV kennen, denn jedem Tipp werden die relevanten Textstellen aus beiden Dokumenten vorangestellt.

Die wohl mit Abstand am häufigsten eingesetzten "Nicht-Text-Elemente" sind GIFs und JPGs. Screenreader können, wie schon in Teil 2 dieses Kurses beschrieben, nur solche Informationen auslesen, die in Textform vorliegen. Deshalb muss für Grafiken zwingend eine sinnvolle Textalternative angeboten werden. Das lässt sich am einfachsten mit dem alt-Attribut des Image-Elements umsetzen, z. B. so:

<img src="kater.gif" alt="Großer schwarzer wuscheliger Kater">

Wichtig ist dabei vor allem ein sinnvoller Alternativ-Text. Dazu lassen sich Grafiken in vier Kategorien unterteilen, die Sie unterschiedlich behandeln sollten:

• Textgrafiken, zum Beispiel Überschriften oder Logos

• Navigationsgrafiken, beispielsweise die Menüleiste

• Layoutgrafiken, zum Beispiel reine Schmuckelemente oder Blind-GIFs

• Abbildungen, also etwa Photos, Illustrationen, Diagramme

a. Textgrafiken

Bei Textgrafiken geben Sie am besten genau den Text an, der in der Grafik dargestellt wird.

Übrigens sollten grundsätzlich höchstens kurze Textteile wie etwa Überschriften oder Buttons als Grafik eingebunden werden; längere Texte dagegen müssen immer als Fließtext vorliegen. Das ist nicht nur für Blinde, Sehbehinderte und Benutzer von Textbrowsern hilfreich, sondern auch eine wichtige Voraussetzung für eine gute Suchmaschinenplatzierung!

b. Navigationsgrafiken

Ganz besonders wichtig ist der Alternativ-Text bei Navigationsgrafiken. Unbenannte verlinkte Grafiken werden von manchen Textbrowsern z. B. lapidar als [LINK] dargestellt. Wo ein solcher Link aber hinführt, kann der User nur raten. Eventuell versuchen Screenreader oder spezielle Vorlese-Browser noch, die nötige Information aus dem Link selbst zu ziehen, was allerdings nicht selten dazu führt, dass blinden Usern kryptisches wie "Link: ordner_4/gb_134.php3? 2,3,1,1,1" vorgelesen wird - nicht eben hilfreich!

Vergeben Sie Ihren Navigationsgrafiken deshalb "sprechende" Alternativtexte wie "Startseite", "Produkte" oder "Kontakt", damit sich Sehbehinderte problemlos orientieren können. Auch Grafiken, die Sehenden mittels Icons wie etwa Vor- und Zurückpfeilen vermitteln, wohin der Link führt, sollten Sie sinnvoll benennen (zum Beispiel "weiter zum nächsten Abschnitt" oder "zurück zum Anfang dieser Seite").

c. Layoutgrafiken

Viele Seiten enthalten jede Menge Grafiken, die nur dem Layout dienen und keinerlei Informationsgehalt haben. Ein Beispiel hierfür sind die berühmten Blind- oder Pixel-GIFs, die häufig eingesetzt werden, um leere Tabellenzellen zu füllen. Von diesen Blind-GIFs können sich manchmal hunderte innerhalb einer einzigen Seite ansammeln.

Wenn Sie bei solchen Grafiken den Alt-Text einfach weglassen, könnte die Darstellung in einem Textbrowser eventuell in etwa so aussehen:

Blind-GIFs ohne Alt-Text

Wer lässt sich so etwas schon gern vorlesen?

Um zu verhindern, dass Layoutgrafiken den Textfluss stören, sollten Sie sie deshalb unbedingt mithilfe eines leeren Alt-Elements vor textbasierten Browsern "verstecken":

<img src="pixel.gif" alt="" width="1" height="1">

d. Abbildungen

Bei Grafiken wie Photos oder Illustrationen sollten Sie von Fall zu Fall abwägen, ob Sie den Inhalt der Grafik im Alternativtext erklären, oder ob Sie die Abbildung durch einen leeren alt-Tag verstecken.

Wird sehenden Usern beispielsweise durch das Photo einer Hühner-Schar auf grüner Wiese vermittelt, dass die Eier, die Sie verkaufen, aus Freilandhaltung stammen, sollten Sie diese Information natürlich auch Blinden zugänglich machen - etwa durch den Alternativtext "Unseren Hühnern steht ein weitläufiges Gehege zur Verfügung".

Ein Portrait der Geschäftsführerin dagegen muss nicht zwingend näher erläutert werden, sofern es nur dazu dient, einen optischen Eindruck zu vermitteln.

Bei Infografiken wie z.B. Diagrammen sollten Sie den Inhalt in klarer, verständlicher Sprache zusammenfassen. Weil das alt-Attribut nicht unbedingt für längere Texte geeignet ist, können Sie statt dessen auch einen Link zu einer ausführlichen Zusammenfassung auf einer externen HTML-Seite setzen. Sie können zu diesem Zweck ein Blind-GIF verlinken, dass unmittelbar auf die Infografik folgt: so bleibt der Link für User grafischer Browser versteckt, wer dagegen einen textorientierten Browser oder einen Screenreader einsetzt, bekommt ihn angezeigt bzw. vorgelesen und kann von der zusätzlichen Information profitieren.

Auch diese Regeln beziehen sich auf den Umgang mit Grafiken - und zwar für den Fall, dass Sie sie als Imagemap einsetzen. Imagemaps ermöglichen es, einer einzelnen Grafik mehrere Links zuzuweisen.

Maps immer clientseitig

Grundsätzlich sollten Sie Imagemaps immer Clientseitig erstellen - wie im folgenden Beispiel:

<img src="map.gif" usemap="#Map" alt="Imagemap zur Navigation">
<map name="Map">
<area shape="rect" coords="0,14,69,44" href="#" alt="Home">
<area shape="rect" coords="110,14,210,44" href="#" alt="Unser Team">
<area shape="rect" coords="225,14,300,44" href="#" alt="Kontakt">
</map>

Alternativtexte nicht vergessen!

Auch bei Imagemaps sind sinnvolle alt-Texte unabdingbar - sowohl im Image-Element selbst (im obigen Beispiel ist das der Text "Imagemap zur Navigation"), als auch zu jedem angegeben Link im Map (in unserem Fall die Texte "Home", "Unser Team" und "Kontakt"). Ohne diese Alternativtexte ist ein Imagemap für Blinde nicht benutzbar!

Auf die folgende Grafik wurde der obige HTML-Code angewandt. Fahren Sie mit der Maus über die Grafik, um die verschiedenen Alternativtexte zu sehen: befindet sich der Cursor über einem Navigationslink, wird der jeweilige Linktext angezeigt; über der restlichen Fläche erscheint der Text "Imagemap zur Navigation" (Hinweis für Mac-User: die Alternativ-Texte werden leider nur unter Windows angezeigt!).

Ansicht

Dank der alt-Texte kann unser Imagemap auch mit dem textbasierten Lynx-Browser problemlos genutzt werden, wie die folgenden Screenshots zeigen. Zunächst zeigt Lynx einen einzelnen Link mit dem Text "Imagemap zur Navigation" an:

Imagemap zur Navigation

Nach der Aktivierung der Links werden die drei im Imagemap enthaltenen Navigationslinks angeboten:

Navigationslinks

Zusätzliche Textlinks

Um die Barrierefreiheit Ihrer Seite zu garantieren, sollten Sie wenn möglich zusätzlich zu jedem Imagemap die gleichen Links noch mal in normaler Textform anbieten (zum Beispiel im Fußteil Ihrer Seite), denn manche ältere Screenreader kommen eventuell noch nicht mit Imagemaps klar.

Wichtig ist im übrigen auch eine ausreichende Größe der klickbaren Flächen, um die Navigation für motorisch behinderte User so einfach wie möglich zu machen.