Tastaturbedienung: Ohne Maus durchs Web

Tastaturbedienung ist für viele Nutzergruppen unverzichtbar: blinde Screenreader-Nutzer, Menschen mit motorischen Einschränkungen, Power-User, temporär Verletzte (gebrochener Arm). Eine Webseite, die nur per Maus funktioniert, schließt all diese Gruppen aus – ein klarer WCAG-Level-A-Verstoß und damit BFSG-kritisch.

Die zentralen Tasten

Tab: bewegt den Fokus zum nächsten interaktiven Element.
Shift+Tab: zurück zum vorherigen.
Enter: aktiviert Links und Buttons.
Leertaste: aktiviert Buttons, Checkboxen, Scrollen der Seite.
Pfeiltasten: Navigation in Menüs, Radio-Gruppen, Custom-Widgets.
Escape: schließt Dialoge, Dropdowns.

Was muss per Tastatur erreichbar sein?

Grundsatz WCAG 2.1.1: alle interaktiven Elemente. Das schließt ein: Navigations-Links, Buttons, Formularfelder, Dropdown-Menüs, Akkordeons, Tabs, Modals, Karussells, Datepicker, Dateiupload. Auch komplexe Custom-Widgets (z. B. Produktfilter-Slider) müssen tastaturbedienbar sein – das ist meist die größte Hürde bei modernen Single-Page-Apps.

Der Fokus muss sichtbar sein

WCAG 2.4.7 Focus Visible (Level AA) fordert: das fokussierte Element muss visuell eindeutig hervorgehoben sein. Der browser-Default-Outline reicht – aber viele CSS-Resets blenden ihn mit "outline:none" aus. Das ist ein häufiger, oft übersehener BFSG-Verstoß. Gute Praxis: :focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }

Tab-Reihenfolge muss logisch sein

WCAG 2.4.3 Focus Order (Level A): die Tab-Reihenfolge muss dem visuellen Seitenfluss folgen. Typische Fehler: tabindex="1", "2" etc. (zerstört die natürliche Reihenfolge), Modals ohne Focus-Trap (Tab springt hinter das Modal). Best Practice: tabindex="0" (wenn Element normalerweise nicht fokussierbar wäre) oder tabindex="-1" (nur per JS fokussierbar).

So testest du selbst

1. Klicke in die Adresszeile. 2. Drücke Tab. 3. Jeder Druck muss den Fokus zum nächsten sinnvollen Element bewegen. 4. Alle Funktionen müssen mit Enter/Leertaste auslösbar sein. 5. Keine Falle: der Fokus muss jedes Element wieder verlassen können. 6. In Dialogen: Fokus bleibt drin, bis Dialog geschlossen wird.