Alternativtext

TL;DR

Fokus-Management sorgt dafür, dass der Tastaturfokus immer dort ist, wo Nutzer ihn erwarten – sichtbar, logisch und ohne Fallen.

Was ist Fokus-Management?

Fokus-Management beschreibt die Kontrolle darüber, welches Element den Tastaturfokus hat. Bei komplexen Interaktionen (Modals, Tabs, dynamische Inhalte) muss der Fokus aktiv gesteuert werden, damit Tastaturnutzer nicht verloren gehen.

Grundprinzipien

• Fokus sichtbar: Nutzer muss immer sehen, wo er ist
• Logische Reihenfolge: Tab-Reihenfolge folgt visueller Leserichtung
• Keine Tastaturfallen: Fokus darf nicht "gefangen" werden
• Fokus bei Interaktion: Nach Öffnen eines Modals Fokus ins Modal setzen

Fokus bei Modals

• Beim Öffnen: Fokus auf erstes interaktives Element
• Während offen: Fokus bleibt im Modal (Focus Trapping)
• Beim Schließen: Fokus zurück zum auslösenden Element

Fokus-Styles

Der Standard-Fokus-Ring ist hässlich, aber wichtig. Statt ihn mit outline: none zu entfernen:

• Eigenen, schöneren Fokus-Style definieren
• :focus-visible nutzen (zeigt Fokus nur bei Tastatur)
• Ausreichend Kontrast zum Hintergrund (3:1 minimum)

tabindex richtig nutzen

• tabindex="0": Element in normale Tab-Reihenfolge einfügen
• tabindex="-1": Per Script fokussierbar, nicht per Tab
• tabindex > 0: Vermeiden! Zerstört natürliche Reihenfolge

Fazit

Gutes Fokus-Management ist unsichtbar für Mausnutzer, aber essenziell für alle anderen. Wenn der Fokus springt, verschwindet oder irrational wandert, ist die Seite für Tastaturnutzer unbenutzbar.