2.1.2 No Keyboard Trap

Wenn ein Benutzer mit der Tastatur in einen Bereich der Seite gelangt (z. B. Popover, Overlay), muss er auch wieder herausgelangen können – ohne Maus.

Ein Tastaturfang (Keyboard Trap) entsteht, wenn z. B.:

• Fokus bleibt in einem Element stecken (z. B. Iframe, Modal)

• Tab funktioniert nicht weiter oder nicht zurück

• Es gibt keinen Weg, einen Bereich zu verlassen – z. B. kann man nur mit Maus schließen

G21: Alle interaktiven Komponenten sind mit Tastatur verlassbar

Stelle sicher, dass alle benutzerdefinierten Widgets, Dialoge oder Overlays über Tab (oder Esc, Shift+Tab) verlassen werden können.

<div role="dialog" aria-modal="true" id="modal" tabindex="-1">
  <button id="close">Schließen</button>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</div>

document.getElementById("close").addEventListener("click", () => {
  document.getElementById("modal").style.display = "none";
  document.getElementById("openBtn").focus();
});

document.addEventListener("keydown", function (e) {
  if (e.key === "Escape") {
    document.getElementById("modal").style.display = "none";
    document.getElementById("openBtn").focus();
  }
});

Der Nutzer kann mit Esc oder durch Button-Schließen das Modal verlassen und Fokus zurückerhalten.

G202 - Interaktionen ohne Maus müssen vollständig funktionieren
G165 - Verwende tabindex="0" sinnvoll für Fokusmanagement
G209 - Inhalte müssen entfernbar sein (Modal, Tooltip etc.)
G183 - Ergänze Escape-Mechanismus (ESC schließt Overlay)

• Der Nutzer kann einen Fokusbereich nicht verlassen, weil Tab/Shift+Tab blockiert ist
• Fokusfalle: Der Nutzer springt immer zum gleichen Element zurück, z. B. durch JS
• Der Fokus verliert sich, wenn ein Bereich geschlossen wird (kein Rücksprung auf vorheriges Element)