Wieviele von uns behaupten ihre Sites sind barrierearm und wie oft gehen Anspruch und Wirklichkeit auseinander?
Dabei ist i.d.R. kein böser Wille im Spiel sondern Unwissenheit.
Vielleicht kann ich euch da mit ein paar simplen Tips hilfreich zur Seite stehen:
Schriftgröße in em oder Prozent
In diesem Artikel habe ich das schon einmal beschrieben.
Skiplinks
Damit wird dem Besucher die Möglichkeit gegeben Bereiche der Website zu überspringen, um direkt zur Navigation oder zum Inhalt zu springen.
Oben auf der Seite werden die Skiplinks idealerweise unter der h1-Überschrift plaziert. Man sollte sich da auf maximal drei beschränken, um keine Verwirrung zu stiften. Am Ende der Seite (im Fussbereich) gibt es die Skiplinks noch einmal, diesmal um zu den jeweiligen Bereichen zurückzuspringen.
Beispiel:
<div id="kopf"><h1>Hauptüberschrift</h1><ul><li class="skiplink"><a href="#inhalt">Zum Inhalt springen</a></li><li class="skiplink"><a href="#navigation">Zur Navigation springen</a></li></ul></div>
Wenn die Navigation direkt nach der Hauptüberschrift kommt reicht ein Skiplink zum Inhalt imho aus. Die Bereiche die angesprungen werden sollen brauchen id’s, um sie anspringbar zu machen.
Die Skiplinks können für normale Besucher per CSS ausgeblendet werden:
.skiplink {position:absolute;top:-9999px;left:-9999px;width:0px;height:0px;display:inline;}
Solche Codeschnipsel könnt ihr in einer Vorlagendatei speichern, damit sie bei Bedarf per copy/paste rasch eingefügt und angepaßt werden können.
Skiplinktabs für Durchtabber
Menschen mit motorischen Einschränkungen haben oft Probleme mit der Mausbedienung, deshalb hangeln sie sich oft mit der Tab-Taste durch eine Seite. Diese Tabs kann man ganz einfach sichtbar machen.
Um auch die Skiplinks dabei ans Licht zu holen ergänzen wir den Quelltext derselben um eine Klasse und fügen noch etwas CSS dazu:
Quellcode:
<div id="kopf"><h1>Hauptüberschrift</h1><ul><li class="skiplink"><a href="#inhalt" class="skiplinktab">Zum Inhalt springen</a></li><li class="skiplink"><a href="#navigation" class="skiplinktab">Zur Navigation springen</a></li></ul></div>
CSS dazu:
.skiplinktab:focus,.skiplinktab:active {position:absolute;top:9999px;left:9999px;display:inline;width:13em;height:auto;background-color:#fff;color:#000;padding:0.6em;border:2px solid #000;}
Die vorher aus dem Bild geschobenen Skiplinks werden beim Betätigen der Tab-Taste eingeblendet. Das funktioniert zumindest im Firefox und im Internet Explorer.
Text,- und Hintergrundkontrast mit CCA prüfen
ca. 8-10% der männlichen Bevölkerung leidet mehr oder weniger unter einer Farbfehlsichtigkeit. Viele Ältere sehen nicht mehr so gut und haben beim Lesen Probleme, wenn der Kontrast zwischen der Schriftfarbe und der Hintergrundfarbe zu gering ist.
Mit dem Colour Contrast Analyzer könnt ihr schnell checken, ob da alles in Ordnung ist.
Für jedes label ein for
Um eine logische Bezeihung zwischen einem Eingabefeld (input) und der entsprechenden Beschriftung (label) herzustellen sollte label mit dem for-Attribut versehen werden.
Beispiel:
<label for="absender">Ihre E-Mail-Adresse</label><input type="text" name="absender" id="absender" />
for von label und id des input-Feldes sind gleich und die logische Beziehung damit hergestellt.
title-Attribute bei Links nur mit Bezug zum Link!
Wenn der Link ein title-Attribut mit ensprechendem Text besitzt dieser dieser Text einen direkten Bezug zum Link haben. Ältere Screenreader lesen den Linktext nicht mehr vor, wenn es ein title-Attribut gibt.
Dropdown- oder Flyout-Menüs nicht mit display:none; oder visibility:hidden; gestalten.
Die Links, die auf diese Art gestaltet sind, werden von den meisten Screenreadern nicht mehr vorgelesen.
Ein erklärender Link dazu. Eine alternative Formatierungsmöglichkeit ohne diese Nachteile gibt es.
Zusammenfassung des Tabelleninhaltes durch das Attribut summary
Dadurch kann sich der Screenreaderuser einen Überblick über den Inhalt der Tabelle verschaffen.
Kopf,- und -Fusszeilen für Tabellen definieren
Erleichtert ebenfalls die Lesbarkeit für die Screenreaderuser.
Wechselnde Seitentitel
Das jede Seite einen spezifischen Seitentitel erhalten sollte ist eigentlich selbstverständlich. Dies erhöht die Usability für alle Besucher.
Valider Quelltext
Nicht valide Seiten verlassen sich auf die Fehlerkorrekturmechanismen der Browser oder Screenreader. Das ist deshalb sicher suboptimal.
Zum Schluß noch ein allgemeiner Hinweis, um die Usability für alle zu verbessern:
Definiert eine druck.css!!
Die Browser haben eine Druckfunktion mit deren Hilfe man sich die aufgerufene Seite auch ausdrucken kann. Da ist es doch einfach ärgerlich wenn alle Bilder oder das Menü mit ausgedruckt werden. Weisser Text auf schwarzem Hintergrund kann für viel Freude beim Besucher sorgen, wenn das dann auch so ausgedruckt wird.
Die Tips erheben keinen Anspruch auf Vollständigkeit, aber helfen vielleicht dem einen oder anderen. Solltet ihr noch Tips zu diesem Thema haben, nur heraus damit!
