Barrierefreies Webdesign
Praxistipps für barrierefreie Webseiten
Praxistipps für barrierefreie Webseiten
Auf dieser Seite
Mit Bild
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.
Mit Bild
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.
Mit Bild
Wichtige Regeln für barrierefreie Webseiten: Grafiken
Mit Bild
Grafiken
Mit Bild
"Stellen Sie ein Text-Äquivalent für jedes Nicht-Text-Element bereit. (...)"
Checkpunkt 1.1 der deutschen Übersetzung der Checkliste zu den Zugänglichkeitsrichtlinien für Web-Inhalte 1.0 des W3C
(http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/checkliste.html)
"Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für Bilder, graphisch dargestellten Text einschließlich Symbolen, (...)"
Bedingung 1 für Anforderung 1 der Anlage zur BITV (http://217.160.60.235/BGBL/bgbl1f/bgbl102s2654.pdf)
Mit Bild
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:
Mit Bild
<img src="kater.gif" alt="Großer schwarzer wuscheliger Kater">
Mit Bild
Wichtig ist dabei vor allem ein sinnvoller Alternativ-Text. Dazu lassen sich Grafiken in vier Kategorien unterteilen, die Sie unterschiedlich behandeln sollten:
Mit Bild
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:
Mit Bild

Blind-GIFs ohne Alt-Text
Mit Bild
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.
Mit Bild
Beispiel:
<img src="diagramm.gif" alt="Diagramm: Entwicklung des Biomilch-Absatzes 2001">
<a href="diagramm_txt.html"><img src="pixel.gif" alt="Ausführliche Zusammenfassung des Diagramms zu Entwicklung des Biomilch-Absatzes 2001"></a>
Mit Bild
Imagemaps
Mit Bild
"Stellen Sie Client-seitige anstelle von Server-seitigen Imagemaps bereit, außer wenn die Regionen mit den verfügbaren geometrischen Formen nicht definiert werden können."
Checkpunkt 9.1 der deutschen Übersetzung der Checkliste zu den Zugänglichkeitsrichtlinien für Web-Inhalte 1.0 des W3C
(http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/checkliste.html)
"Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für (...) Regionen von Imagemaps, (...)"
Bedingung 1 für Anforderung 1 der Anlage zur BITV (http://217.160.60.235/BGBL/bgbl1f/bgbl102s2654.pdf)
Mit Bild
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!).
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:
Mit Bild

Imagemap zur Navigation
Mit Bild
Nach der Aktivierung der Links werden die drei im Imagemap enthaltenen Navigationslinks angeboten:
Mit Bild

Navigationslinks
Mit Bild
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.