Tastaturnavigation: Der meistunterschätzte Standard im Web

Tastaturnavigation: Der meistunterschätzte Standard im Web

Was passiert, wenn die Maus wegfällt?

„Testen Sie Ihre Website einmal nur mit der Tab-Taste. Was Sie erleben, erleben Millionen Menschen täglich.”

Die meisten Websites werden mit Maus und Touchscreen entwickelt. Getestet wird ebenfalls mit Maus und Touchscreen.

Und genau hier entsteht eine Lücke:

Für Menschen, die ausschließlich per Tastatur navigieren, ist ein Großteil des Webs kaum nutzbar.

Wer navigiert per Tastatur?

Tastaturnavigation ist keine Randerscheinung.

Sie ist die primäre Navigationsmethode für:

• Menschen mit motorischen Einschränkungen, die keine Maus bedienen können
• Menschen, die Screenreader nutzen (Screenreader folgen der Tastaturreihenfolge)
• Power-User, die schneller per Tastatur als per Maus arbeiten
• Nutzer:innen mit temporären Einschränkungen – z. B. nach einer Verletzung
• Menschen, die Sprach- oder Schaltersteuerung verwenden

Schätzungen zufolge sind in Deutschland über 10 Millionen Menschen von eingeschränkter Mobilität betroffen.

Was bedeutet Tastaturzugänglichkeit konkret?

Eine vollständig tastaturzugängliche Website erfüllt folgende Anforderungen:

1. Alle Interaktionen sind per Tastatur erreichbar

• Links, Buttons, Formulare, Menüs
• Modale Dialoge, Dropdowns, Tabs
• Karussells, Akkordeons, interaktive Filter

Wenn ein Element mit der Maus klickbar ist, muss es auch mit der Taste Enter oder Leertaste aktivierbar sein.

2. Die Tab-Reihenfolge ist logisch

Beim Drücken von Tab bewegt sich der Fokus durch die Seite – in einer Reihenfolge, die dem visuellen Layout entspricht.

Sprünge, Schleifen oder unsichtbare Elemente in der Tab-Reihenfolge erzeugen Desorientierung.

3. Der Fokus ist jederzeit sichtbar

Nutzer:innen müssen immer erkennen können:

„Wo bin ich gerade auf der Seite?”

Viele Websites entfernen die Standard-Fokusmarkierung (:focus { outline: none }), um das Design cleaner zu halten.

Das Ergebnis: Tastaturnutzer:innen sind blind für ihre eigene Position.

4. Tastaturnutzer können keine Falle geraten

Ein häufiges Problem: Nutzer:innen navigieren in ein Dropdown-Menü oder einen modalen Dialog – und kommen nicht mehr heraus.

Die Tastatur führt in eine Fokus-Falle, aus der ohne Maus kein Ausweg existiert.

Häufige Fehler in der Praxis

Diese Probleme begegnen uns im Alltag am häufigsten:

• Custom-Buttons ohne Tastaturunterstützung – <div> statt <button>
• Fehlende Skip-Links – Nutzer:innen müssen die gesamte Navigation durchlaufen
• Modale Dialoge ohne Fokus-Management – Fokus bleibt im Hintergrund
• Animierte Menüs ohne Keyboard-Events – nur Hover, kein Keyboard
• Drag-and-Drop ohne Alternative – keine Tastatur-Entsprechung

Das Ironie: Diese Fehler entstehen selten aus böser Absicht – sie entstehen, weil niemand testet.

Der WCAG-Standard für Tastaturzugänglichkeit

Die WCAG 2.1 definiert unter dem Prinzip Bedienbar (Operable) klare Anforderungen:

Alle Stufe-A-Kriterien sind Mindestanforderungen – sie gelten ohne Ausnahme.

So testen Sie Ihre Website

Ein einfacher Test in 3 Schritten:

Schritt 1: Öffnen Sie Ihre Website und legen Sie die Maus weg.

Schritt 2: Navigieren Sie ausschließlich per Tab, Shift+Tab, Enter und Leertaste.

Schritt 3: Notieren Sie:

• Können Sie alle wichtigen Bereiche erreichen?
• Sehen Sie jederzeit, wo der Fokus liegt?
• Können Sie Menüs und Dialoge wieder schließen?

Wenn Sie bei Schritt 2 stecken bleiben, tun es Ihre Nutzer:innen auch.

Wie ClarusPlus unterstützt

ClarusPlus analysiert Ihre Website automatisch auf Verstöße gegen die Tastaturzugänglichkeit:

• Erkennung von nicht erreichbaren Elementen
• Hinweise auf fehlende Fokus-Indikatoren
• Analyse der Tab-Reihenfolge
• Identifikation von Fokus-Fallen

Das ClarusPlus Widget ergänzt bestehende Lösungen – etwa durch anpassbare Fokus-Hervorhebungen, die Nutzer:innen selbst aktivieren können.

Fazit: Tastatur ist kein Sonderfall

Tastaturnavigation wird oft als „Nische” abgetan.

Dabei ist sie:

• gesetzlich vorgeschrieben (WCAG, BFSG)
• technisch umsetzbar mit semantischem HTML
• testbar ohne Hilfsmittel
• unverzichtbar für Millionen von Nutzer:innen

Eine Website, die ohne Maus nicht funktioniert, ist keine barrierefreie Website.

Ihre nächsten Schritte

• Testen Sie Ihre Website mit der Tab-Taste
• Prüfen Sie Fokus-Indikatoren im CSS
• Ersetzen Sie Custom-Elemente durch semantisches HTML
• Führen Sie ein Accessibility-Audit mit ClarusPlus durch

Kontakt: [email protected]

Mehr erfahren: clarusplus.com