Begriffe vorab
- Fokus: das Element, das gerade per Tastatur bedient werden kann.
- Fokusreihenfolge: die Reihenfolge, in der Elemente per Tab angesprungen werden.
- Fokus-Falle: ein Bereich, aus dem man per Tastatur nicht herauskommt.
Nicht jede Nutzerin bedient eine Website mit der Maus: Menschen mit motorischen Einschränkungen, Screenreader-Nutzende und Power-User arbeiten häufig ausschließlich mit der Tastatur.
Die Grundregel (WCAG 2.1.1)
Jede Funktion muss über die Tastatur erreichbar sein, meist mit Tab (vorwärts), Umschalt+Tab (rückwärts), Enter/Leertaste (aktivieren) und den Pfeiltasten (innerhalb von Komponenten wie Menüs oder Tabs).
Keine Tastatur-Fallen
WCAG 2.1.2 verlangt, dass der Fokus eine Komponente immer wieder verlassen kann. Ein schlecht gebautes Modal, aus dem Tab nicht mehr herausführt, ist eine klassische Tastatur-Falle.
Sichtbarer Fokus (2.4.7 / 2.4.11)
Der Browser zeigt den Fokus standardmäßig mit einem Umriss (outline) an. Ein verbreiteter, aber problematischer Fehler ist *:focus { outline: none; } ohne Ersatz – damit verschwindet jede Orientierung für Tastaturnutzende. Seit WCAG 2.2 verlangt Kriterium 2.4.11 zusätzlich, dass der Fokusindikator nicht durch andere Inhalte verdeckt wird, etwa durch eine fixierte Kopfzeile.
Logische Reihenfolge
Die Tab-Reihenfolge sollte der visuellen und inhaltlichen Reihenfolge entsprechen (WCAG 2.4.3). Positives tabindex (z. B. tabindex="5") erzwingt eine eigene Reihenfolge und sollte vermieden werden; tabindex="0" reiht ein Element sinnvoll in die natürliche Reihenfolge ein, tabindex="-1" macht es nur programmatisch fokussierbar.
Skip-Links
Ein „Zum Inhalt springen“-Link am Anfang der Seite erlaubt es, die Navigation zu überspringen (WCAG 2.4.1 Bypass Blocks). Er ist oft visuell versteckt und erscheint erst beim Fokussieren.
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<main id="main">…</main>Schneller Praxistest: gesamte Seite nur mit Tab, Umschalt+Tab und Enter durchgehen. Jede Stelle, an der man nicht mehr weiterkommt oder den Fokus nicht mehr sieht, ist ein Fund.
Ein Beispiel: Dialog richtig bauen
Öffnet sich ein Dialog, muss der Fokus hineinwandern, und Tab darf nur innerhalb des Dialogs wechseln, solange er offen ist. Mit Escape lässt er sich schließen, danach kehrt der Fokus zum auslösenden Element zurück. Fehlt das, verliert man als Tastaturnutzer die Orientierung oder bleibt ungewollt hinter dem Dialog hängen.
Eigene Bedienelemente
Baut man statt eines echten Buttons ein anderes Element nach, muss man Fokussierbarkeit, Enter- und Leertastenbedienung, Rolle und Fokusanzeige selbst ergänzen. Natives HTML bringt all das mit – ein Grund mehr, es zu bevorzugen.
Typische Fehler
- Den Fokusrahmen per CSS ohne Ersatz entfernen.
- Elemente mit positivem
tabindexin eine eigene Reihenfolge zwingen. - Menüs, die nur bei Mausberührung aufklappen.
- Fixierte Kopfzeilen, die den fokussierten Inhalt verdecken.
Prüfstatus: Belegt (Stand 1. Oktober 2026): Jahreszahlen, Zahlen, Namen und Quellenangaben dieser Lektion, soweit die Quellenliste sie nennt, wurden gegen Primärquellen geprüft. Nicht einzeln belegt: erklärende Darstellung nach Lehrbuchstand und Quellen, die in der Liste als „allgemeine Referenz“ markiert sind.
Quellen
- WCAG 2.2 – Erfolgskriterien 2.1.1, 2.1.2, 2.4.1, 2.4.3, 2.4.7, 2.4.11
- W3C WAI-ARIA Authoring Practices Guide (APG) – Abschnitt „Keyboard Interface“ (allgemeine Referenz, nicht Zeile für Zeile geprüft)