Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Usability jenseits von Maus, Screen und Stylus veröffentlicht in 2013

Natürlich kann die Usability auf Webseiten durch Widgets und dynamische Effekte verbessert werden. Die Usability ist aber viel zu oft nur auf Maus- und zwischenzeitlich auch Touch-Screen-Nutzer abgestimmt. Damit auch die Barrierefreiheit sichergestellt werden kann, muss die Tastaturnutzung ebenfalls in das Blickfeld der Usability-Optimierung rücken.

Eine rundum-Lösung für eine optimale (und ausschließliche) Nutzung der Tastatur als Eingabegerät gibt es nicht. Für Formulare wird oft der Extern, englischsprachig: Einsatz von Schaltflächen als Lösung erachtet, aber in der Praxis stimmt das nicht immer. Wie oft sind Schaltflächen wegen Scripts weder mit der Eingabetaste noch der Leertaste bedienbar und somit nicht barrierefrei? Das kommt häufiger vor, als man annehme möge! Die Folge ist, dass manche Formulare zwar ausgefüllt werden können, aber ohne Maus können sie nicht abgeschickt werden.

Unabhängig von konkreten Aufgaben sollte folgendes nicht aus dem Augen verloren gehen:

Änderung des Kontextes

Oft ist für die Barrierefreiheit einer Webseite entscheidend, dass keine Intern: Änderungen des Kontextes stattfinden, wenn die Webseite mit der Tastatur navigiert oder bedient werden soll. Änderungen des Kontextes können verschiedenartig sein. Zum einen geht es um den Austausch von Inhalten auf der Seite, die der Seite eine andere Bedeutung geben. Zum anderen geht es um diverse Umstände wie das automatische Abschicken eines Formulars, das Anzeigen eines neuen Fensters oder eine Manipulation des Fokus.

Das Problem taucht vor allem im Zusammenhang mit der Tastaturbedienung auf. Während das Drücken der Eingabe- oder Leertaste impliziert, dass der Nutzer eine Änderung wie bei einem Mausklick erwarten kann, wird eine signifikante und nicht steuerbaren Änderung des Kontextes, die durch das bloße Fokussieren eines Elements ausgelöst wird, u.U. zu einer nicht bedienbaren Webseite führen. Gleiches gilt für die Bedienung von Steuerelementen etwa mit Pfeiltasten: Grundsätzlich sollten Nutzer Aktionen durch Drücken der Eingabe- oder Leertaste aktivieren, und automatische Änderungen des Kontextes sollten vermieden werden.

Die Änderung des Kontextes wird ausführlicher in folgenden Beiträgen behandelt:

Anregungen für die Tastaturoptimierung

Wo das Optimum für die Tastaturbedienung liegt, hängt wie immer von der konkreten Situation ab. Da das Thema aus verschiedenen Gründen nicht hart abgegrenzt werden kann, sollen beispielhaft einige Aspekte der Tastaturbedienung anhand eines Date-Pickers gezeigt werden.

Meist gibt es vier tastaturrelevante Probleme, die in Widgets auftauchen können:

  1. Der Aufruf eines Date-Pickers erfolgt oft durch eine anklickbare Grafik. Weil die Grafik nur einen Event-Handler besitzt, aber weder ein Link noch ein Button ist, kann das Widget Intern: nur mit der Maus bedient werden. Die Einblendung der Datumsauswahl sollte mit einer Schaltfläche oder einem Link erfolgen. Keinesfalls sollte der Kalender Intern: bei Fokus automatisch aufgehen.
  2. Nach Aufruf des Date-Pickers besteht meist kein Fokus. Der Fokus sollte auf das auslösende Element oder auf das erste Element des Kalenders mit element.focus(); gesetzt werden.
  3. Das nächste häufige Problem ist die Einblendung der Datumsauswahl. Wenn ein Date-Picker mit der Tastatur zwar aufgerufen werden kann, das Widget aber am Ende des DOM eingefügt wird, ist die Nutzbarkeit mit der Tastatur nicht sinnvoll.

    Zwei Ansichten: Browserdarstellung der Deutschen-Bahn-Seite mit eingeblendetem Kalender und versetzt eine DOM-Ansicht, in dem deutlich erkennbar ist, dass der Kalender am Ende der Seite steht.

    Der Kalender muss Intern: unmittelbar hinter dem auslösenden Element im DOM eingefügt werden. Wenn der Kalender am Ende der Seite eingefügt wird, müssen Tastaturnutzer eine halbe Ewigkeit auf die Tab-Taste drücken, um ihn bedienen zu können.
  4. Und natürlich gibt es gute und nicht so gute Umsetzungen solcher Widgets. Wenn ein Date-Picker aufgerufen wird, steht der Tastaturnutzer vor einer Reihe von Links, die alle den Fokus erhalten können. Wenn kein (tastaturbedienbarer) Schließen-Button vorhanden oder nicht vor den Links platziert wird, ist der Tastaturnutzer genötigt, durch alle Links durchzutabben. Idealerweise wird am Anfang des Kalenders eine Möglichkeit des Schließens geboten.

    Zwei Ansichten: Browserdarstellung von zwei Eingabefeldern, wobei im ersten ein Datum steht und für das zweite Feld ein Kalender eingeblendet ist. Die zweite Ansicht zeigt den DOM-Baum mit den Eingabefeldern, gefolgt von einem Schließen-Button und dem eigentlichen Kalender

Es gehört im barrierefreien Webdesign zum guten Stil dazu, die Nutzung einer Webseite auch für die Tastaturbedienung zu optimieren. Das Bedeutet, insbesondere dynamische Webseiten müssen intensiv auf ihre Nutzbarkeit ausschließlich mit der Tastatur geprüft werden.