Einfache Tests

Mittlerweile gibt es ganze Bücher, die sich um Software-Tests drehen. Es gibt sogar zertifizierte Tester. Alle Tests haben in der Regel gemeinsam, dass man entweder Entwickler, Webdesigner oder technisch versiert sein muss, um sie durchzuführen und brauchbare Ergebnisse zu bekommen. Das Gleiche gilt für automatische Testtools. Selbst die Validatoren des W3C für HTML und CSS werfen häufig unverständliche Fehlermeldungen aus. Ich will im Folgenden ein paar Testmöglichkeiten aufzeigen, die auch von technisch unversierten Menschen durchgeführt werden können. Alles was man braucht ist ein Browser und Geduld. Ich empfehle für die Tests den Internet Explorer ab Version 7 oder den Firefox, weil ich deren Verhalten kenne. Ob das Ganze mit Opera, Chrome oder Safari funktioniert, kann ich leider nicht sagen.

Tastaturbedienbarkeit

Eine der wichtigsten Säulen 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. 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. Ich habe recht selten Webseiten gesehen, wo man das mit der Tastatur bewerkstelligen kann.

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 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 Tabreihenfolge 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.
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 Ärgerliches 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. Ach ja, bitte keine Captchas, sondern einen anständigen Spamschutz einsetzen.
An dieser Stelle müssten wir eigentlich noch über clientseitige Prüfung und Fehlertoleranz sprechen, aber ich denke, dass wäre schon zu spezifisch. Ich verzichte hier auch auf den Test eines barrierefreien Media-Players. Der ist noch seltener als ein barrierefreies PDF.

Vergrößerbarkeit

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 Contentspalte ineinander fließen, kann das natürlich keiner mehr lesen. Beobachtet habe ich das vor allem bei Seiten, die für den IE 6 „optimiert“ wurden. Davon gibt es noch reichlich Seiten, man suche einfach nach „optimiert für den Internet Explorer 6“.
Da alle Browser in verschiedenen Versionen unterschiedliche Bugs in diesem Bereich haben, kann dieser Testschritt schon problematisch werden. Ich hatte bei älteren Versionen von Opera beobachtet, das schon bei leichter Vergrößerung bei einigen Websites der komplette Inhalt abgesackt ist. Bei einem älteren Firefox hatte ich plötzlich nur noch die linke und die rechte Spalte vor mir, die komplette Contentspalte war abgesackt und begann am Fuß der linken und rechten Spalte.

Quellcode

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.
kleines Update: Der einfachere 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 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 Contentbereich hinter der Fußzeiel 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.

Fazit

Diese einfachen Tests sind kein Ersatz für eine Evaluation durch dafür geeignete Leute. Sie stellen nur ein einfaches Mittel für Laien dar, einfache Überprüfungen durchzuführen. Wenn ich ein wenig mehr Zeit habe, werde ich eine Checkliste nachtragen, mit der Laien nach weiteren möglichen Schwächen in ihren Webauftritten suchen können. Bis dahin wünsche ich frohes Testen.

Wenn Du es nicht machst, macht es keiner