Keyboard Navigation ist die Bedienung einer Website allein mit der Tastatur, ohne Maus und ohne Touch. Darauf angewiesen sind Menschen mit motorischen Einschränkungen, alle, die mit einem Screenreader arbeiten, und viele, die einfach schnell am Rechner sind.
- Keyboard Navigation
Bedienung einer Website allein mit der Tastatur, ohne Maus und ohne Touch.
Beispiel: „Die Keyboard Navigation führt in der Reihenfolge der Seite vom Sprunglink bis zum Footer.“Auch: Tastaturbedienung oder Tastaturnavigation.
Abgrenzung zur barrierefreien Navigation: Dort geht es um das Menü und seine Auszeichnung. Die Keyboard Navigation betrifft jedes bedienbare Element der ganzen Seite.
Welche Tasten erwartet werden
Der Tabulator springt zum nächsten bedienbaren Element, mit der Umschalttaste rückwärts. Die Eingabetaste löst Links und Schaltflächen aus, die Leertaste zusätzlich Schaltflächen und Kästchen. Innerhalb zusammengesetzter Elemente wie Reitern oder Auswahllisten führen die Pfeiltasten, und die Escape-Taste schließt, was sich geöffnet hat.
Dass jede Funktion ohne Maus erreichbar sein muss, verlangt das Erfolgskriterium Tastatur (2.1.1). Es verlangt zugleich, dass man überall wieder herauskommt: Ein Element, das den Fokus festhält, ist eine Tastaturfalle.
Wie die Reihenfolge entsteht
Aus der Reihenfolge im Quelltext, nicht aus der Anordnung auf dem Bildschirm. Wer per CSS umsortiert, erzeugt einen Fokus, der im Zickzack springt. Deshalb gehört die Sidebar im Markup hinter den Hauptinhalt und das mobile Menü dorthin, wo sein Schalter steht.
Das Attribut tabindex greift in diese Reihenfolge ein und sollte höchstens den Wert 0 oder minus 1 tragen. Positive Werte setzen einzelne Elemente vor alle anderen und bringen die ganze Seite durcheinander.
/* Sichtbarer Fokus, nur bei Tastaturbedienung */
:focus-visible {
outline: 3px solid #0078ff;
outline-offset: 2px;
}
/* Niemals ersatzlos entfernen */
/* :focus { outline: none } */Der Test, der zwei Minuten dauert
Die Seite einmal von oben nach unten nur mit der Tabulatortaste durchlaufen. Drei Fragen dabei: Ist jederzeit sichtbar, wo der Fokus steht? Kommt man an jede Funktion heran? Und entspricht die Reihenfolge dem, was man sieht?
Aus unserer Arbeit an über 2.500 Website-Projekten findet dieser Durchgang mehr als jedes Prüfwerkzeug. Der häufigste Befund ist der entfernte Fokusrahmen, der zweithäufigste das mobile Menü, das im geschlossenen Zustand weiter erreichbar bleibt.