Tastaturnavigation: Das Fundament digitaler Barrierefreiheit

Wenn ich ein Accessibility-Audit beginne, teste ich als erstes die Tastaturnavigation. Nicht als Warm-up. Sondern weil ich, wenn sie nicht funktioniert, eigentlich aufhören könnte. Alles andere wäre dann akademisch.

Das klingt provokant. Aber es stimmt – und ich möchte erklären, warum.

Was Tastaturnavigation bedeutet – und was nicht

Tastaturnavigation bedeutet: Eine Website muss vollständig bedienbar sein ohne Maus, Trackpad oder Touchscreen. Nur mit der Tastatur. Die WCAG – die Web Content Accessibility Guidelines, die auch dem deutschen BFSG und der BITV zugrunde liegen – formulieren das in Erfolgskriterium 2.1.1 klar: Alle Funktionen müssen per Tastatur erreichbar und bedienbar sein.

Das ist kein optionales Nice-to-have. Es ist eines der vier POUR-Grundprinzipien: Bedienbar. Wenn eine Schaltfläche nicht per Tab erreichbar ist, ein Dropdown nicht per Pfeil- oder Enter-Taste öffnet, ein Modal sich nicht ohne Maus schließen lässt – dann ist die Seite für bestimmte Nutzergruppen schlicht unbenutzbar.

Wer wirklich auf Tastaturnavigation angewiesen ist

Hier sitzt der erste und hartnäckigste Mythos: „Das brauchen doch nur blinde Menschen.” Nein.

Tastaturnavigation ist die Grundlage für eine viel breitere Gruppe als die meisten vermuten. Menschen mit motorischen Einschränkungen, die keine Maus präzise steuern können, nutzen die Tastatur – oder assistive Hardware wie Kopfstäbe, Mundstäbe, Schaltersteuerungen oder Eye-Tracking. All diese Technologien bauen auf denselben Mechanismen auf wie eine normale Tastatureingabe. Wer die Tastaturnavigation bricht, bricht in einem Zug alle diese Technologien mit.

Blinde und stark seheingeschränkte Nutzer steuern Screenreader ebenfalls über die Tastatur. Der Screenreader liest vor, was fokussiert ist – er folgt dem Fokus. Kein Fokus, keine Information.

Und dann gibt es eine Gruppe, über die kaum jemand spricht: Power-User. Buchhalter, Sachbearbeiter, alle, die täglich stundenlang Formulare ausfüllen, Daten eingeben, Tabellen pflegen. Die wollen gar nicht zur Maus greifen – das kostet Zeit und unterbricht den Arbeitsfluss. Tab, Shift+Tab, Enter, Pfeiltasten. Wer das einmal verinnerlicht hat, will nicht mehr zurück.

Ich selbst hatte kürzlich einen kleinen Aha-Moment: Mein Bluetooth-Empfänger ist während der Arbeit ausgefallen, Maus tot. Ich war froh, dass die Tastatur noch ging und ich weiterarbeiten konnte. Was für mich ein kurzer Notfall war, ist für andere Menschen schlicht der Alltag.

Warum fehlende Tastaturnavigation ein K.-o.-Kriterium ist

Zurück zum Audit. Warum könnte man wirklich aufhören, wenn die Tastaturnavigation nicht funktioniert?

Weil sie die Infrastruktur ist, auf der alles andere aufbaut. Ein Link ohne sichtbaren Fokusindikator kann nicht auf Kontrast oder Label geprüft werden – ich kann ihn nicht einmal richtig identifizieren. Ein Formularfeld, das mit tabindex="-1" aus dem Fokusfluss entfernt wurde, existiert für den Screenreader-Test schlicht nicht. Ein Modal, das keinen Fokus erhält beim Öffnen und keinen zurückgibt beim Schließen, bricht den gesamten Navigationsfluss.

Tastaturnavigation ist nicht ein Kriterium unter vielen. Sie ist die Schicht, auf der alle anderen Kriterien erst sinnvoll testbar werden.

Eine Seite kann wunderschöne alt-Texte haben, hervorragende Farbkontraste, semantisch korrektes HTML – und trotzdem für Menschen mit motorischen Einschränkungen oder Screenreader-Nutzer komplett unbrauchbar sein, weil der Fokus verloren geht, springt oder nie ankommt.

Die häufigsten Fehler – und die hartnäckigsten Mythen

„Wir haben den Fokusring entfernt, weil er hässlich aussieht.”

Das ist einer der verbreitetsten und gleichzeitig folgenreichsten Accessibility-Fehler, den ein Stylesheet haben kann. Der sichtbare Fokusindikator ist nicht optional. Er ist in WCAG 2.4.7 verankert und in WCAG 2.4.11 (ab WCAG 2.2, Level AA) noch schärfer gefasst. Wer outline: none setzt und nichts ersetzt, blendet buchstäblich aus, wo man sich auf der Seite befindet. Die Lösung ist kein Verzicht, sondern ein eigener, gut sichtbarer Fokusindikator – das ist eine Designaufgabe, keine Kapitulation.

„Für unsere Nutzer ist das nicht relevant.”

Kein Unternehmen weiß wirklich, wer seine Nutzer sind. Behinderungen sind häufig nicht sichtbar und werden selten gemeldet. Und seit dem 28. Juni 2025 ist „unsere Nutzer brauchen das nicht” auch kein rechtliches Argument mehr.

„Wir nutzen JavaScript-Komponenten, da geht das halt nicht anders.”

Doch. Die ARIA Authoring Practices Guide (APG) der W3C dokumentiert exakt, welche Tastaturinteraktionen für welches Widget-Pattern erwartet werden – von Tabs über Accordions bis zum Combobox-Pattern. Es ist Arbeit. Aber es ist lösbar, und es ist notwendig.

Tastaturnavigation selbst erleben

Der beste Einstieg ist nicht Lesen, sondern Machen. Legen Sie die Maus zur Seite – oder schieben Sie sie physisch weg – und navigieren Sie durch diese Seite.

Tab bringt Sie zum nächsten fokussierbaren Element, Shift+Tab zurück. Enter aktiviert Links und Schaltflächen. Leertaste aktiviert Checkboxen. Pfeiltasten navigieren innerhalb von Komponenten wie Radiogruppen oder Menüs.

Was sehen Sie? Wo springt der Fokus hin? Wo verlieren Sie ihn? Können Sie alles erreichen, was Sie mit der Maus erreichen können?

Fünf Minuten dieses Tests sagen mehr als jede Checkliste.

Was gute Tastaturnavigation auszeichnet

Vier Eigenschaften, die den Unterschied machen:

Vollständigkeit. Alle interaktiven Elemente sind per Tastatur erreichbar – kein Dropdown, kein Modal, keine Custom-Komponente bleibt ausgeschlossen.

Logische Reihenfolge. Die Tab-Reihenfolge folgt dem visuellen und inhaltlichen Fluss der Seite. Wer von oben nach unten navigiert, landet nicht plötzlich im Footer, bevor er den Hauptinhalt gesehen hat.

Sichtbarkeit. Der Fokusindikator ist jederzeit klar erkennbar. Kein Element wird fokussiert, ohne dass man es sieht.

Aktive Fokusverwaltung. Komponenten, die den Fokus benötigen, verwalten ihn bewusst. Wenn ein Modal öffnet, landet der Fokus darin. Wenn es schließt, kehrt er zum auslösenden Element zurück.

Tastaturnavigation ist nicht die spektakulärste Disziplin in der Webentwicklung. Aber sie ist die grundlegendste. Wer versteht, wie Fokus funktioniert – warum tabindex mit Bedacht eingesetzt werden muss, wie Custom Components korrekt implementiert werden – der versteht digitale Barrierefreiheit von Grund auf.

Und wer sie ignoriert, schließt Menschen aus. Nicht theoretisch. Praktisch, täglich, messbar.