JavaScript, AJAX und Dynamik

Neben der Struktur der Webseite und ihrem Design ist auch noch ihr Verhalten als dritte Ebene wichtig. JavaScript sagt dem Browser, wie er sich verhalten soll, wenn ein bestimmtes Ereignis wie eine Mausbewegung eintritt, das ist die berühmte Dynamik von Webseiten. Dynamik heißt, dass die Webseite sich ändert, ohne dass sie neu geladen wird. Die Einbindung von Videos oder Animationen wird hingegen nicht als Dynamik verstanden. Dynamik ist meistens mit einer Aktion wie einem Klick, einem Überfahren mit der Maus oder einem Tastenanschlag verbunden.

Elemente, die sich verändern, ohne dass die Webseite neu geladen wird, werden heute fast ausschließlich mit JavaScript erzeugt. Früher galt JavaScript als unzugängliche Spielerei. Für viele Web-2.0-Webseiten ist es aber unverzichtbar. Es hat auch eine Reihe von Vorteilen für die Barrierefreiheit und Usability. Mit JavaScript können zum Beispiel Formulare darauf geprüft werden, ob sie korrekt ausgefült wurden, ohne dass die Webseite neu geladen werden muss. Es können dynamisch Hilfe-Informationen eingeblendet werden, wenn man mit der Maus über ein Element fährt und vieles mehr.

Es gibt ausführlichere Informationen zu barrierefreiem JavaScript, als ich sie bieten kann,, deshalb stelle ich hier nur die Basisinformationen zusammen. Alle Elemente sollten möglichst mit HTML erstellt und mit CSS gestaltet werden, nur ihr Verhalten sollte über JavaScript gesteuert werden. Wie bei HTML und CSS gilt auch für JavaScript, dass es von Struktur und Design getrennt in eine eigene Datei geschrieben wird.

Erkennbarkeit – Benutzbarkeit – Geräteunabhängigkeit

Screenreader haben Probleme damit, dynamisch hinzugefügte Inhalte auf Webseiten zu erkennen. Außerdem sind viele Verhaltensweisen nur auf die Maus ausgelegt, so dass sie bei Tastatureingaben nicht reagieren.

Das gilt zum Beispiel für Formulare. Im schlimmsten Fall kann es passieren, dass ein ausgefülltes Formular nicht abgesendet werden kann, weil der Button nur auf Mauseingaben und nicht auf die Tastatur reagiert.

Womit wir zum nächsten Punkt kommen: das Eingabegerät sollte nicht relevant sein. Es sollte keine Rolle spielen, ob jemand sein Gerät mit der Maus, der Tastatur oder per Berührung bedient.

Ein weiterer Bereich, der problematisch sein kann sind dynamische Menüs. Diese Menüs klappen auf, wenn mit der Maus darüber gefahren wird. Es gibt gleich drei Gründe, warum diese Menüs schwierig sind:

  1. Sie sind fast nie mit der Tastatur bedienbar. Im schlimmsten Fall bleibt der Nutzer auf der Ebene hängen, auf der er sich gerade befindet und kommt an die unteren Webseiten nicht heran. Im besten Fall hat er nur Probleme, sich von einer Ebene zur nächsten zu bewegen.
  2. Grobmotorische Menschen haben Probleme, die Maus exakt zu führen. Das Element klappt zu, sobald es verlassen wird, es wird eine Tortur, den Menüpunkt aufzurufen.
  3. Das Menü funktioniert nicht, wenn JavaScript deaktiviert ist.

Ein besonderes Problem sind auch die Lightboxen, das sind Dialogboxen, die sich über den Inhalt der Webseite legen und eine Eingabe erwarten. Dem Blinden kann es passieren, dass er gar nicht merkt, was sich da auf dem Bildschirm tut, weil der Screenreader sich nach wie vor über die Webseite bewegt, als ob nichts wäre. Der sehende Tastaturnutzer hingegen bemerktzwar , dass da eine Dialogbox ist, kann sie aber mit der Tastatur nicht erreichen.
Am Ärgerlichsten ist es, wenn bei abgeschaltetem JavaScript Elemente der Webseite nicht funktionieren, aber keine Fehlermeldung auftaucht. Es gibt einige Nutzer, die aus Sicherheitsgründen mit einer Erweiterung wie NoScript für den Firefox unterwegs sind. Dabei werden Skripte generell geblockt, bis sie selektiv freigegeben werden. Viele Nutzer vergessen, dass Skripte blockiert sind und verstehen nicht, warum etwas nicht funktioniert. Es gilt also, entweder einen Hinweis auf die Notwendigkeit von JavaScript einzufügen oder eine Fallbacklösung anzubieten, so dass die nötige Funktion auch ohne JavaScript genutzt werden kann.
Um es kurz zu machen: die Basisfunktionen der Webseite sollten ohne JavaScript bedienbar sein. Die erweiterten Funktionen hingegen können mit JavaScript umgesetzt werden, das Ganze wird unter dem Stichwort Progressive Enhancement zusammengefasst.

Semantik hinzufügen

Während die meisten HTML-Elemente von Natur aus über eine Semantik verfügen, haben JavaScript-Widgets keine solche Maschinenlesbarkeit an Bord. Eine Semantik kann einfach über ARIA hinzugefügt werden, allerdings ist im Umgang mit ARIA viel Wissen und Vorsicht gefragt.
ARIA fügt im Grunde nur die Semantik hinzu. Funktionalitäten wie Tastatur-Bedienbarkeit müssen zusätzlich hinzugefügt werden.

Testen ist Pflicht

Auch wenn JavaScript eine echte Programmiersprache ist, benötigt man kein Fachwissen, um die Barrierefreiheit zu testen, zumindest nicht für die ersten Schritte. Getestet werden muss auf jeden Fall, aber das lässt sich in diesem Fall leicht durchführen: Schalte über die Optionen des Browsers oder eine Accessibility-Test-Toolbar JavaScript ab und du wirst feststellen, dass einige Seiten kaum noch funktionieren.
Außerdem sollte die Webseite mit der Tastatur geprüft werden. Auch ein Screenreader-Test kann nicht schaden. Die kritischen Stellen habe ich oben schon genannt: dynamische Navigationen, Formulare und Lightboxen.

Lektüre-Empfehlungen