Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Reingelegt — Per Tastatur in die Falle veröffentlicht in 2015

Tastaturfalle

Die Tastaturbedienung gehört zu den entscheidenden Kriterien des barrierefreien Webdesigns. Die Vermeidung von Tastaturfallen wird dabei in den Web Content Accessibility Guidelines (WCAG) 2.0 eine besondere Gewichtung gegeben. Die Vermeidung von Tastaturfallen ist eine von vier Erfolgskriterien, die für eine Konformität immer erfüllt sein müssen.

Ein Tastaturnutzer befindet sich in einer Tastaturfalle, wenn er zwar die Inhalte einer Webseite über eine Tastaturschnittstelle bedienen kann, aber nicht zwischen verschiedenen Inhaltstypen mit den üblichen Tasten (u.a. Tab-Taste) wechseln kann.

Eingebettete Plugins

Die Tastaturfalle entsteht vor allem dann, wenn verschiedene Formate auf einer Seite kombiniert werden, und diese Formate das Laden eines Plugins erfordern. Beispielsweise kann ein Applet in einer Webseite eingebettet sein, wodurch ein Plugin das Fokus-Management übernimmt, sobald der eingebettete Inhalt den Fokus erhält. Vergleichbare Probleme können auch mit Extern, englischsprachig: Adobe Flash festgestellt werden.

Beim Durchwandern des eingebetteten Inhalts per Tabulatortaste zirkuliert der Fokus oft nur innerhalb des Inhalts, d.h. wenn das letzte aktive Element erreicht wird, führt das Drücken der Tabulatortaste zurück zum ersten aktiven Element innerhalb des eingebetteten Inhalts. Ohne einen Mauszeiger oder eine andere Eingabemöglichkeit kann der Fokus nicht außerhalb des eingebetteten Inhalts gebracht werden.

Um per Tastatur der Tastaturfalle zu entkommen, ist es nicht zwingend erforderlich, dass der Nutzer die Tabulatortaste benutzt. Die Webentwicklung kann Event-Handler, die auf die Esc-Taste oder einen Shortcut reagieren und den Fokus per Script zum umgebenden Inhalt bringen, berücksichtigen. Problematisch dabei ist nur, dass Tastaturnutzer den Tastenbefehl kennen müssen. Deshalb ist es ratsam, in solchen Fällen den Tastenbefehl textlich und sichtbar zu vermitteln.

Widgets

Eine Tastaturfalle kann auch in dynamischen Anwendungen mit JavaScript entstehen. Die Umstände, die dazu führen, sind jedoch andere und sind auf ein fehlendes Fokus-Management der Webentwicklung zurückzuführen. Wenn im folgenden Beispiel eines Modalfensters

Bild aus einer Bildergalerie mit 'Weiter'-, 'Zurück'- und 'Schließen'-Funktionen

das "X" nicht in der Fokus-Reihenfolge steht, haben Tastaturnutzer keine Chance, das Fenster zu schließen außer sie rufen die Webseite neu auf. Deshalb sollten für solche wichtigen Funktionen Schaltflächen oder Links eingesetzt werden, denn sie sind per Tastatur zugänglich. Alternativ zu Buttons und Links können auch die role- und tabindex-Attribute vergeben werden.

Es ist dennoch eine gute Idee, eine alternative Möglichkeit zum Schließen des Fensters anzubieten. Auf Desktop-Systemen führt normalerweise die Esc-Taste zum Schließen eines Dialogfensters. Wenn nicht bereits implementiert — etwa durch eine JavaScript-Bibliothek — kann für Modalfenster auf Webseiten der folgende Code helfen:

window.onkeydown = function(event) {
  if (event.keyCode === 27) {
    alert('escape wurde gedrückt');
    // Weitere Befehle: Entfernen des Modalfensters aus dem DOM
  }
}