Tastaturfalle finden und beheben

In unserem eigenen Schweregrad-Katalog ist die Tastaturfalle der einzige Befund der Stufe „kritisch“, die eine ganze Seite betrifft. Der Grund ist einfach: Wer die Maus nicht nutzen kann, kommt an der Falle nicht vorbei. Alles danach, inklusive Warenkorb und Kasse, existiert für diese Person nicht mehr.

Woran es meistens liegt

• Ein selbstgebauter Fokus-Loop in Dialog, Menü oder Off-Canvas-Navigation, der kein Escape kennt.
• Eingebettete Fremdinhalte (Video-Player, Karten, Zahlungs-Widgets), die Tab abfangen.
• Komponenten, die beim Schließen den Fokus nirgendwo hinsetzen: Er landet dann am Seitenanfang oder verschwindet ganz.

// Fokusfalle: der Loop haelt den Fokus im Dialog fest,
// aber es gibt keinen Ausgang. Escape ist nicht belegt,
// und der Dialog laesst sich nur mit der Maus schliessen.
dialog.addEventListener("keydown", (event) => {
  if (event.key !== "Tab") return;
  const focusables = dialog.querySelectorAll("a, button, input");
  const first = focusables[0];
  const last = focusables[focusables.length - 1];

  if (event.shiftKey && document.activeElement === first) {
    event.preventDefault();
    last.focus();
  } else if (!event.shiftKey && document.activeElement === last) {
    event.preventDefault();
    first.focus();
  }
});

Der Loop selbst ist richtig und für Modals sogar gefordert. Falsch ist, dass es keinen Weg nach draußen gibt: kein Escape, kein Schließen per Tastatur.

Der Fix

// Derselbe Loop, aber mit Ausgang und Rueckkehr.
let lastTrigger = null;

function openDialog(trigger) {
  lastTrigger = trigger;
  dialog.hidden = false;
  dialog.querySelector("[autofocus], button, a, input")?.focus();
  document.addEventListener("keydown", onKeydown);
}

function closeDialog() {
  dialog.hidden = true;
  document.removeEventListener("keydown", onKeydown);
  // Fokus zurueck an den Ausloeser: sonst landet er am Seitenanfang
  lastTrigger?.focus();
}

function onKeydown(event) {
  if (event.key === "Escape") {
    closeDialog();          // der Ausgang, den 2.1.2 verlangt
    return;
  }
  if (event.key === "Tab") {
    trapTabWithinDialog(event); // Loop nur, solange der Dialog offen ist
  }
}

Die robusteste Variante

<!-- Am robustesten: das native Element. Der Browser bringt
     Fokus-Loop, Escape und Rueckgabe des Fokus selbst mit. -->
<dialog id="confirm">
  <h2>Bestellung loeschen?</h2>
  <form method="dialog">
    <button value="cancel">Abbrechen</button>
    <button value="confirm">Loeschen</button>
  </form>
</dialog>

<script>
  document.getElementById("confirm").showModal();
</script>

Mit showModal() bringt der Browser Fokus-Loop, Escape und Fokusrückgabe von sich aus mit. Das ist deutlich weniger Code, der falsch sein kann, und die Fallstricke sind bereits gelöst.

Testen, in zwei Minuten

1. Cursor in die Adresszeile setzen, dann nur mit Tab die Seite durchlaufen.
2. Notieren, wo der Fokus stehen bleibt oder im Kreis läuft.
3. In jedem Overlay Escape drücken: Schließt es, und wo landet der Fokus danach?
4. Auch Shift-Tab prüfen: Manche Fallen halten nur eine Richtung fest.