accessBlog

Aktuelles zum Thema Barrierefreies Webdesign.

Für das Prüfen von barrierefreien Webseiten gibt es eine ganze Reihe ausgefeilter Testverfahren. Sie werden in der Regel von Experten durchgeführt. Im folgenden wollen wir zeigen, wie Sie selbst einige einfache Tests zur Barrierefreiheit Ihrer Webseiten durchführen können. Für diese Tests benötigen Sie lediglich einen Browser und ein wenig Geduld.

Weiterlesen …

Tastaturbedienbarkeit

Eine der wichtigsten Säulen der Barrierefreiheit ist die Tastaturbedienbarkeit. Zunächst legen wir also die Maus bei Seite und arbeiten nur mit der Tastatur.

Basis 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, also Links und Formular-Elemente der Website anzuspringen. Bei jedem anklickbaren Element sollte eine Änderung des fokussierten Elements eintreten. In der Regel ist das ein Rahmen, es kann aber auch eine farbliche Änderung oder eine Unterstreichung bei Links sein. Eine rein farbliche Änderung kann für farbfehlsichtige oder sehbehinderte Menschen problematisch sein. Entweder nehmen sie die Änderung nicht wahr oder sie können einen Link etwa wegen einer schlechten Farbauswahl oder zu geringen Kontrasten nicht mehr lesen.

Grundsätzlich ist es sinnvoll, eine Information über zwei Wege zu vermitteln: also etwa über eine Unterstreichung und eine Farbänderung oder eine Farbänderung und einen Rahmen.

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 Auslösen nichts passiert, haben wir schon ein Barrierefreiheits-Problem aufgespürt.

Außerdem sollte der Tabulator nicht an irgendeiner Stelle der Seite hängen bleiben – das kann besonders bei Flashanimationen oder Werbebannern passieren.

Wir greifen nun – ausnahmsweise – zur Maus und prüfen, ob wir bei klickbaren Elementen wie Links eine deutliche Hervorhebung sehen können, wenn wir diese mit der Maus ansteuern. Das dient vor allem Sehbehinderten oder Menschen mit motorischen Einschränkungen. Sie setzen eventuell die Maus ein, sind dabei aber wesentlich unsicherer als Sehende. Sie müssen deutlich erkennen können, dass sie ein Element mit dem Mauscursor fokussiert haben, dass dieses Element also anklickbar ist und brauchen eine hinreichend große Klickfläche. Üblich ist eine farbliche Veränderung bei Links oder Formularelementen, ein Rahmen oder Ähnliches. Der Mausfokus kann sich vom Tastaturfokus unterscheiden, das ist aber kein Muss.

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 Menüs die bei Mausberührung aufklappen. Wenn wir – wieder 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. Natürlich sollte auch in diesen Menüs deutlich sein, welches Element gerade den Fokus hat.

Die gleichen Elemente sollten auch mit der Maus getestet werden. Wie oben erwähnt agieren viele Menschen unsicher mit der Maus. Für sie wird es sehr schwierig, wenn sie dynamische Elemente fokussieren müssen. Das aufklappende Menü sollte nicht unmittelbar zuklappen, wenn der Mauscursor das Element kurz verlässt.

Formulare

In nächsten Schritt sollten wir noch einen speziellen Blick auf Formulare werfen. Zunächst einmal tabben wir einmal quer durch das Formular. Die Tabreihenfolge sollte logisch sein, dass heißt, so wie die Elemente optisch auf der Website angeordnet sind, so sollten sie auch angetabbt werden. Hier kann das Verhalten unerwartet sein: 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 an ein bestimmtes Ausfüll-Schema so gewöhnt sind, dass wir ein solches Verhalten als störend empfinden.

Wenn Sie in Ihrem Formular eine Funktion zum Löschen der Eingaben anbieten, sollte diese Funktion deutlich vom Absende-Button unterscheidbar sein und in der Tabreihenfolge hinter dem Absendebutton liegen. Formulare werden häufig halbautomatisch ausgefüllt– die Gefahr ist dann relativ groß, dass unaufmerksame Nutzer ihre eingegebenen Daten unabsichtlich löschen.

Nach der korrekten Tabreihenfolge prüfen wir, ob wir alle Auswahlboxen aktivieren oder deaktivieren können. Das machen wir mit der Leertaste, nicht mit Return! Jedes auswählbare Element sollte nur mit der Tastatur (Pfeiltasten) 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 aufklappen, um eine Übersicht über die auswählbaren Optionen zu erhalten.

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. Zudem wird es für Blinde schwierig, sich einen Überblick über Auswahlmöglichkeiten zu verschaffen und eine Auswahl zu treffen, wenn jede Tastaturbewegung eine ungewünschte Aktion auslöst.

Im letzten Formular-Testschritt geben wir passende Daten in die Maske 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. 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.

Verzichten Sie in jedem Fall auf rein visuelle CAPTCHAs. Wenn Sie Audio-CAPTCHAs anbieten, sollten Sie testen, ob Sie selber in der Lage sind, die Audio-Aufgaben zu lösen. Auch die CAPTCHAs sollten im übrigen komplett über die Tastatur bearbeitet werden können.

Vergrößerbarkeit

Alle gängigen Browser erlauben es, Inhalte von Webseiten zu vergrößern. Eine Ausnahme ist der IE 6, der relative Größenangaben für Texte im CSS benötigt. Über die Tastatur erfolgt die Vergrößerung über STRG/Cmd und + bzw. STRG/Cmd und Mausrad. Die Inhalte der Seite sollten sich dabei 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 oder gegenseitig überlagern.

Strukturierung

Vor allem für blinde Nutzer ist es wichtig, dass die Seiten korrekt strukturiert sind. Der einfachste Weg zur Prüfung der Struktur: Wählen Sie im Firefox unter Ansicht → Webseiten-Stil → Kein Stil. Hier sehen Sie das Skelett der Website und stellen auch fest, ob der logische Aufbau der Website durch Überschriften mit und ohne Design übereinstimmt. Ähnliche Funktionen finden Sie auch in anderen Browsern. Um das Design wiederherzustellen, wählen Sie im Firefox unter Ansicht → Webseiten-Stil → Standardstil.

Es kann auch nützlich sein, den Quellcode einer Webseite zu betrachten, um potentielle Probleme aufzuspüren. Einige einfache Probleme lassen sich auch ohne Kenntnis von HTML, CSS und JavaScript erkennen.

Zum Betrachten des Quellcodes rufen Sie mit der rechten Maustaste das Kontextmenü auf und wählen dort Quelltext ansehen. Die meisten 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.

Hier können Sie 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 ältere Hilfssoftware eher schlecht zurecht.

Fazit

Diese einfachen Tests können schwere Probleme in der Zugänglichkeit Ihrer Webseite aufzeigen. Sie sind allerdings kein Ersatz für eine Evaluation durch Experten oder für Praxistests durch Betroffene.