WCAG 2.1.2: Keine Tastaturfalle

Wenn sich der Tastaturfokus in einen Bereich bewegen lässt, muss er sich auch wieder herausbewegen lassen – mit Tab, Shift+Tab oder Esc. Braucht es dafür eine unübliche Taste, muss das dabeistehen. Wer das verletzt, sperrt Tastaturnutzer buchstäblich in einem Seitenbereich ein. (Englisch: No Keyboard Trap.)

Was verlangt das Kriterium?

Die typischen Fallen:

• Modals ohne Ausgang: Der Fokus ist im Dialog gefangen (gewollt!), aber Esc schließt nicht und ein Schließen-Button fehlt oder ist nicht erreichbar – gewollter Fokus-Kreis wird zur Falle.
• Eingebettete Inhalte: Video-Player, Karten, Chat-Widgets oder Werbe-iframes, die Tab-Drücke schlucken und nie wieder hergeben.
• Autofokus-Schleifen: Skripte, die den Fokus bei blur sofort wieder einfangen („Bitte erst dieses Feld korrekt ausfüllen“).

Wichtig zur Abgrenzung: Der Fokus-Kreis in einem modalen Dialog ist erwünscht (solange er offen ist, soll Tab im Dialog bleiben) – die Falle beginnt, wenn es keinen Weg gibt, den Dialog selbst zu schließen.

Wen betrifft es besonders?

Alle, die ohne Maus arbeiten: Wer mit der Maus einfach woanders hinklicken kann, bemerkt die Falle nie – für Tastatur- und Screenreader-Nutzer endet an ihr die Seite.

Richtig & falsch im Code

// Falsch: Fokus wird zwanghaft zurückgeholt – klassische Falle
input.addEventListener('blur', () => input.focus());

<!-- Richtig: natives dialog-Element – Esc schließt eingebaut,
     der Fokus kehrt zum auslösenden Button zurück -->
<dialog id="newsletter">
  <h2>Newsletter abonnieren</h2>
  <!-- … -->
  <button type="button" autofocus>Schließen</button>
</dialog>
<script>/* dialog.showModal() nutzen – kein eigener Fokus-Käfig nötig */</script>

Das native <dialog> mit showModal() liefert Fokus-Kreis und Esc-Ausgang frei Haus – Details im Muster Dialoge & Modals.

So testest du es

1. Beim Tastatur-Durchlauf an jeder „Station“ prüfen: Komme ich mit Tab und Shift+Tab wieder weg?
2. Jedes Overlay öffnen: Schließt Esc? Ist der Schließen-Button erreichbar?
3. Eingebettete Dritt-Widgets (Player, Karten, Chats) explizit durchtabben – sie sind die häufigsten unbemerkten Fallen.

Verwandte Themen

• Dialoge & Modals – Fokus-Kreis richtig, Falle vermeiden
• 2.1.1 Tastatur – das Fundament
• Tastatur & Fokus – die Praxis-Seite