Webseiten auf Barrierefreiheit prüfen

Im Folgenden zeigen wir Ihnen ein paar Testmöglichkeiten, die auch von technisch unversierten Menschen durchgeführt werden können. Alles was man braucht ist ein Browser und Geduld. Lernen Sie in unserer Schulung, wie Sie Webseiten auf Barrierefreiheit testen.

Eine wichtige Säule der Barrierefreiheit ist die Tastaturbedienbarkeit. Im ersten Schritt legen wir also die Maus bei Seite.

Der Kern der Tastaturbedienung ist die Tabulator-Taste. Mit dieser Taste kann man von Element zu Element springen. Im ersten Schritt versuchen wir also, alle anklickbaren oder ausfüllbaren Elemente der Website anzuspringen. Bei jedem anklickbaren Element sollte eine Änderung des angetabbten Elements eintreten. In der Regel ist das ein Rahmen, es kann aber auch eine farbliche Änderung oder auch eine Unterstreichung bei Links sein. Eine rein farbliche Änderung kann für Farbblinde oder Sehbehinderte problematisch sein. Entweder nehmen sie die Änderung nicht wahr oder sie können etwa einen Link wegen einer schlechten Farbauswahl nicht mehr lesen. Grundsätzlich ist es sinnvoll, die Information über zwei Wege zu vermitteln: also etwa eine Unterstreichung und eine Farbänderung, Farbänderung und Rahmen und so weiter. Im Folgenden gehe ich davon aus, dass der angetabbte Zustand als Rahmen deutlich gemacht wird.

Mit der Return- oder Leertaste sollten wir Links, Buttons und alles andere Klickbare versuchen zu aktivieren. Wenn es keine deutlich sichtbare Änderung im angetabbten Zustand gibt oder beim Klicken nichts passiert, haben wir schon ein Barrierefreiheits-Problem aufgespürt.

Außerdem sollte der Tabulator nicht an irgendeiner Stelle der Seite hängen bleiben. Wenn wir das letzte Element auf der Website erreicht haben, springt der Tab hoffentlich wieder auf das erste Klickbare Element auf der Webseite oder in die Adresszeile des Browsers. Drücken wir gleichzeitig Shift und Tab, können wir rückwärts tabben.

Wir greifen nun – ausnahmsweise – zur Maus und prüfen, ob wir bei klickbaren Elementen eine deutliche Hervorhebung sehen können. Das dient vor allem Sehbehinderten oder Menschen mit motorischen Einschränkungen. Sie setzen vielleicht die Maus ein, sind aber wesentlich unsicherer als Sehende. Sie müssen deutlich erkennen können, dass ein Element klickbar ist und brauchen eine hinreichend große Klickfläche. Üblich ist hier eine farbliche Veränderung bei Links oder Formularelementen, ein Rahmen oder Ähnliches.

Besonderes Augenmerk sollten wir außerdem noch auf Elemente legen, die dynamisch eingeblendet werden, also ohne dass die Seite neu geladen wird. Das sind zum Beispiel dynamisch aufklappende Menüs. Wenn wir – immer noch mit der Tastatur – auf den entsprechenden Link kommen, sollte das Menü nach einem Druck auf Return aufklappen und aufgeklappt bleiben. Wir können nun alle Links in diesem aufgeklappten Menüpunkt durchgehen und sollten auch einen davon ausprobieren.

In nächsten Schritt sollten wir noch einen speziellen Blick auf Formulare werfen. Zunächst einmal tabben wir einmal quer durch das Formular. Die Tab-Reihenfolge sollte logisch sein, dass heißt, so wie die Elemente auf der Website angeordnet sind, sollten sie auch angetabbt werden. Hier kann das seltsamste Zeug passieren, zum Beispiel springt der Cursor von der Auswahl der Ansprache zur Eingabe des Straßennamens und übergeht die Eingabe des Personennamens. Wenn man die Stadt eingegeben hat, springt der Cursor auf einmal zum Vornamen. Das ist nicht nur verwirrend, sondern nervig, weil wir so an ein bestimmtes Ausfüll-Schema gewöhnt sind, dass wir ein solches Verhalten als störend empfinden.

Nach der korrekten Tab-Reihenfolge prüfen wir, ob wir alle Auswahlboxen aktivieren oder deaktivieren können. Das machen wir mit der Leertaste, nicht mit Return! Jede Checkbox und jeder Radiobutton sollte nur mit der Tastatur ausgewählt werden können. Bei Auswahllisten, die man aufklappen kann, sollte man mit der Cursor-auf und Cursor-ab-Taste die gewünschte Option auswählen können. Wenn man sich auf der Auswahlliste befindet, kann man sie mit der Alt und der Cursor-Runter-Taste hoffentlich aufklappen. Unter keinen Umständen sollte bei jeder Cursor-Bewegung in der Auswahlliste die Seite oder der Seiteninhalt neu geladen werden. Dynamische Änderungen in Formularen sind vor allem mit älterer Hilfstechnik generell sehr problematisch.

Wir können außerdem testen, ob unsere Eingabefelder gelabelt sind. Das Label ist eine Verknüpfung aus Text und Eingabefeld, damit Sehbehinderte und Blinde wissen, was sie wo eingeben sollen. Wenn ihr mit der Maus auf eine Beschriftung wie etwa „Straße“ doppeltippt, sollte die Schreibmarke direkt in dieses Eingabefeld springen.

Im letzten Formularschritt geben wir ein paar Daten ein und schauen, ob wir diese Daten mit der Tastatur abschicken können. Es gibt wohl nichts Ärgerlicheres als ein ausgefülltes Formular, welches sich nicht abschicken lässt. Wir geben also zu den Feldern passende Daten ein und schicken es ab. Man sollte dem Empfänger mitteilen, dass es sich nur um einen Test handelt. Das Abschicken erledigen wir mit Return, sobald wir den zuständigen Button erreicht haben. Bitte setzen Sie anstelle von Captchas einen anständigen Spamschutz ein.

Alle gängigen Browser erlauben es, Inhalte von Webseiten zu vergrößern. Eine Ausnahme ist der IE 6, der relative Größenangaben benötigt, aber den sollte man ohnehin lieber nicht benutzen. Über die Tastatur erfolgt die Vergrößerung über "STRG" und "+" bzw. Steuerung und Mausrad.

Wenn wir ein klassisches Drei-Spalten-Layout haben, sollte sich die Seite gleichmäßig vergrößern. Das heißt, alle Inhalte verschieben sich nach rechts unten. Die Inhalte sollten sich nicht schon bei geringer Vergrößerung ineinander schieben. Wenn zum Beispiel Navigation und Content-Spalte ineinander fließen, kann das natürlich keiner mehr lesen.

Man muss nicht unbedingt den Quellcode einer Website lesen können, um potentielle Probleme aufzuspüren. Zwei Dinge kann man auf jeden Fall überprüfen.

Zum einen lässt sich prüfen, ob die Seite korrekt strukturiert ist. Der einfachere Weg zur Prüfung der Struktur: Wählen Sie im Firefox unter Ansicht "Webseiten-Stil" und anschließend "Kein Stil". Hier sehen Sie das Skelett der Website und stellen auch fest, ob der Aufbau der Website mit und ohne Design übereinstimmt.

Dazu ruft man mit der rechten Maustaste das Kontextmenü auf und wählt dort Quelltext ansehen. Die mir bekannten Browser arbeiten mit Syntaxhighlighting, das heißt, der Code wird farblich hervorgehoben. Wir können alles ignorieren, was zwischen spitzen Klammern < und > steht und schauen uns nur den Text an.

Für Blinde ist es wichtig, dass die Website logisch strukturiert ist. Wir erwarten, dass zunächst der Kopfbereich, dann die Navigation, der Inhalt, die dritte Spalte und der Fußbereich in dieser Reihenfolge auftreten. Der Grund ist ganz einfach: da wir linear – also am Quelltext orientiert – durch die Webseite gehen, ist es ziemlich verwirrend, wenn der Content-Bereich hinter der Fußzeile auftaucht, das kommt öfter vor, als man denken würde und ist dank CSS kein gestalterisches Problem. Der Blinde wird aber wahrscheinlich denken, dass die Seite keine Inhalte hat.

Im gleichen Schritt kann man auch prüfen, ob überhaupt Inhalte im Quelltext zu sehen sind. Häufig sieht man einen sehr kurzen Quelltext, wo im Codebereich so etwas wie Frame steht. Oder es wird nur sehr viel Programmcode angezeigt, aber kein menschenlesbarer Text. Im ersten Fall wurde die Website mit Frames gestaltet und ist damit vor allem für ältere Hilfstechnik von Blinden problematisch. Im letzteren Fall wird die Seite vermutlich komplett über JavaScript direkt im Browser erzeugt. Auch damit kommt die Hilfssoftware eher schlecht zurecht.