Tastatur-Bedienbarkeit testen: Tab-Reihenfolge, Fokus-Styles und Skip-Links

Warum Tastatur-Bedienbarkeit entscheidend ist

Menschen mit motorischen Einschränkungen, blinde Nutzer mit Screenreadern und Power-User navigieren per Tastatur. Wenn ein Button, Link oder Formularfeld nicht per Tab erreichbar ist, ist die Webseite für diese Nutzer unbedienbar. WCAG 2.1.1 fordert: Alle Funktionen müssen per Tastatur erreichbar sein.

Der einfachste Test: Tab durchdrücken

Lade deine Webseite, klicke in die Adresszeile und drücke Tab. Beobachte: Siehst du immer wo der Fokus gerade ist (Fokus-Indikator)? Erreichst du alle Links, Buttons und Formularfelder? Kannst du das Menü per Enter öffnen? Ist die Reihenfolge logisch? Kommst du aus Modal-Dialogen per Escape wieder raus? Wenn eine dieser Fragen mit Nein beantwortet wird, hast du einen BFSG-Verstoß.

Fokus-Styles: Sichtbar statt versteckt

Viele Designer entfernen den Fokus-Indikator (outline: none) weil er 'hässlich' aussieht. Das ist ein schwerwiegender Barrierefreiheits-Fehler. Lösung: Entferne nie outline komplett.

Gestalte stattdessen einen schönen Fokus-Style: :focus-visible {{ outline: 2px solid #4A90D9; outline-offset: 2px; }}.

Skip-Links implementieren

Ein Skip-Link erlaubt Tastatur-Nutzern die Navigation zu überspringen und direkt zum Inhalt zu springen. Implementierung: Ein versteckter Link ganz oben auf der Seite der beim Fokus sichtbar wird und zu #main-content springt. Die meisten CMS-Themes haben das eingebaut – prüfe ob es funktioniert.

Tastaturfallen vermeiden

Eine Tastaturfalle entsteht wenn der Fokus in ein Element hineingeht aber nicht mehr herauskommt. Häufig bei: Modal-Dialogen (Fokus muss im Modal 'gefangen' werden und per Escape schließbar sein), eingebetteten Widgets (Maps, Videos) und Custom Dropdowns.

Häufig gestellte Fragen