Fokus-Management: Wo ist der Tastatur-Fokus gerade?

In statischen Seiten bewegt sich der Fokus natürlich durch Tab. Sobald Modals, dynamische Inhalte, Single-Page-Apps ins Spiel kommen, muss Fokus aktiv verwaltet werden – sonst geht er "verloren" und Screenreader-Nutzer sind desorientiert.

Die drei Säulen des Fokus-Managements

1. Fokus-Sichtbarkeit: Der aktuelle Fokus muss visuell eindeutig erkennbar sein (outline, box-shadow).
2. Fokus-Fang (Focus-Trap): In Modals bleibt der Fokus drin – Tab endet nicht hinter dem Modal.
3. Fokus-Rückkehr: Nach dem Schließen eines Modals/Menüs kehrt der Fokus zum auslösenden Element zurück.

Focus-Trap implementieren

In Modals: erstes und letztes fokussierbares Element merken. Bei Tab auf letztem Element → zum ersten springen. Bei Shift+Tab auf erstem → zum letzten. Tools: focus-trap-Bibliothek (NPM), headless-ui/focus, nativ: inert-Attribut für Hintergrund.

Fokus per JavaScript setzen

Nach dem Öffnen eines Modals: element.focus() auf das erste wichtige Element. Bei Navigation in SPAs: Fokus auf

der neuen Seite setzen. Achtung: focus() funktioniert nicht auf nicht-fokussierbaren Elementen – tabindex="-1" setzen.

Typische Fehler

Fokus geht hinter das Modal: Modal als DOM-Geschwister des Hauptinhalts, keine Trap.
outline: none entfernt alles: Ersatz-Styling fehlt.
SPA-Routing ohne Fokus-Update: Screenreader liest nichts Neues vor.
Dynamisch geladener Inhalt ohne aria-live: neue Informationen werden nicht angekündigt.

WCAG-Bezug

WCAG 2.4.3 Focus Order (Level A), 2.4.7 Focus Visible (Level AA), 2.4.11 Focus Not Obscured (WCAG 2.2, Level AA), 3.2.1 On Focus (Level A – Fokussieren allein darf keine unerwartete Änderung auslösen).