Gurkcity-Webdesign-Tutorial:
10 Punkte zur Umsetzung von barrierefreiem Webdesign:
Erkennen Sie die Zeichen der Zeit und gestalten Sie Ihren Webauftritt barrierefrei. Von der barrierefreien Gestaltung einer Internetpräsenz profitieren nicht nur Sehbehinderte und Blinde, sondern auch die zwei am schnellsten wachsenden Nutzergruppen im Internet, Senioren und Benutzer von mobilen Endgeräten (PDA / Palm / Handy...). Die Verbesserung der Usability (Nutzbarkeit einer Webseite), kürzere Ladezeiten und Kompatibilität zu unterschiedlicher Ausgabesoftware lassen alle Benutzer und Betreiber des Internets profitieren. Hinzu kommt eine leichtere Indizierbarkeit der Webseiten durch Suchmaschinen.
Lösungen:
1) Alternativtexte für Bilder und Videos
Testen Sie Ihre Webseite, indem Sie in Ihrem Browser die Bilder abschalten. Im Internet-Explorer wählen Sie Extras/Internetoptionen/Erweitert, im Bereich Multimedia wählen Sie den Punkt "Bilder anzeigen" ab. Laden Sie Ihre Seite neu (mit F5). Bilder werden nicht mehr angezeigt, stattdessen erscheint der im alt-Attribut des img-Tags eingegebene Alternativtext. Wählen Sie den Alternativtext sinnvoll, nicht einfach "Hier klicken", in diesem Fall versteht niemand, was sich hinter dem Bild verbirgt.
2) klare Navigations- und Menüstruktur
Gliedern Sie Ihre Inhalte sinnvoll, achten Sie beim Menü auf die richtige Wortwahl. Bieten Sie versteckte Links an, mit der Benutzer von Nur-Text-Browsern die Navigation überspringen können, da z.B. blinde Menschen mit der Tab-Taste nacheinander von Link zu Link springen. Legen Sie Ihre Navigation als HTML-Liste an.
3) Farben und Lesbarkeit von Texten
Achten Sie darauf, Farbenblinde Menschen mit Sehschwächen nicht auszuschließen. Gestalten Sie die Webseiten mit klaren und starken Kontrasten, um Bereiche gut voneinander abzugrenzen. Achten Sie auch auf die Gestaltung der Grafiken, Videos und Animationen, die Sie in Ihr Dokument einbetten. Sie können Ihre Webseiten und Grafiken unter
testen lassen. Dort finden Sie auch Informationen darüber, wie Bilder für Farbenblinde optimiert werden können.
4) Seitenstruktur: Trennung von Inhalt und Layout
Benutzen Sie HTML als Auszeichnungssprache, gliedern Sie Ihre Webseite mit Überschriften, Textinhalten, Listen für die Navigation. Vermeiden Sie Tabellen als Gestaltungsmittel, benutzen Sie Stylesheets zur Positionierung und Gestaltung von Farben, Hintergründen und Formatierung von Texten. Vermeiden Sie Frames, da dies oft in Textbrowsern zu Problemen der Darstellung kommt.
5) Textformatierungen
Benutzen Sie relative Angaben für Schriftgrößen. Bevorzugt wird em (em-quad), wodurch die Größe des betreffenden Elementes relativ zur Schriftgröße des großen M des referenzierten Elementes berechnet wird.
Betten Sie möglichst Schrift nicht als Grafik in Ihre Webseite ein, sondern als Text. Dadurch bleibt die Schrift skalierbar. Benutzen Sie möglichst serifenlose Schriften, da diese am Bildschirm leichter zu lesen sind. Verzichten Sie auf blinkende und sich bewegende Texte.
6) Tabulatorreihenfolge
Prüfen Sie die logische Anordnung von Formularelementen, Schaltflächen und Links. Gegebenenfalls nutzen Sie das Tabindex-Tag, um Formularelemente in die logische Reihenfolge zu bringen.
7) Tastaturkurzbefehle
Benutzen Sie Acceskeys, das sind Tastaturkurzbefehle, um bestimmte Seitenelemente anzusteuern. Sie können Links mit dem Attribut accesskey="" versehen, dessen Wert ein Tastaturkurzbefehl darstellt. Vom Betriebssystem verwendete Tastenkombinationen sollten vermieden werden (z.B. Alt+F4). Die Links rufen Sie mit "Alt+Accesskey" auf (Internet-Explorer, Netscape, Mozilla, Firefox).
8) Nachladen von Seiten
Das Nachladen von Seiten sollte vermieden werden, da man niemals weiß, wie lange Besucher zur Informationsaufnahme benötigen.
9) W3C-Standard, valider Quellcode
Beachten Sie die Standards des W3C für Ihr Webdokument. Prüfen Sie Ihre Webseiten unter
und beheben Sie gegebenenfalls Fehler im Dokument. Nur mit validem Quellcode können Sie sichergehen, dass die Webseiten auf den meisten Browsern korrekt dargestellt werden.
10) Flash & PDF-Dokumente
Prüfen Sie Ihre Webseiten in Textbrowsern, z.B. Lynx, ob multimediale Inhalte dargestellt werden, die i.d.R. ein Plugin im Browser benötigen. Hierzu zählen Flash-Animationen und PDF-Dokumente. Stellen Sie gegebenenfalls Alternativangebote dar.
Testen Sie nun Ihre Seiten mit einem Textbrowser.
Eine Online-Emulation finden Sie beim Delorie-Lynx-Viewer unter:
http://www.delorie.com/web/lynxview.html
Sie möchten Ihren Webauftritt barrierefrei gestalten? Dann wenden Sie
sich doch einfach an uns und lassen Sie sich einen Kostenvoranschlag für ein barrierefreies Webdesign machen.
Wir beraten Sie gerne.
Chris Gurk von Gurkcity Webdesign (www.gurkcity.de)
Links zum Thema:
- Barrierefinder - Mit Online-Test, Punkte zur barrierefreien Gestaltung Ihrer Homepage.
- Informationen und gesetzliche Grundlage: die BITV - Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz
- Linksammlung zu barrierefreien Websites
//© 2004 by Gurkcity Webdesign - www.gurkcity.de
//Verwendung des Tutorials nur unter Angabe eines Links/ Querverweises auf www.gurkcity.de erlaubt