2.1.2 Keine Tastaturfalle

Was bedeutet das?

Wer mit der Tab-Taste durch Ihre Seite geht, muss aus jedem Bereich wieder herauskommen. Bleibt der Fokus etwa in einem eingebetteten Video, einer Karte oder einem Formularfeld hängen, ist die restliche Seite für diese Person nicht mehr erreichbar.

Reichen Tab, Umschalt+Tab oder die Pfeiltasten nicht aus, ist eine andere Taste erlaubt, etwa Esc. Dann müssen Sie aber sichtbar erklären, wie man herauskommt. Ein Dialog darf den Fokus absichtlich in sich halten, solange er sich per Tastatur schließen lässt.

Wem hilft das?

• Menschen, die ausschließlich die Tastatur nutzen
• Screenreader-Nutzer, die sonst die Seite neu laden müssten
• Menschen mit Schaltersteuerung, für die jeder Umweg viel Kraft kostet

Typische Fehler

• Eingebettete Video- oder Kartenplayer, die alle Tastendrücke abfangen
• Dialoge oder Cookie-Hinweise, die den Fokus festhalten, sich aber nicht per Tastatur schließen lassen
• Rich-Text-Editoren, in denen die Tab-Taste nur Einrückungen erzeugt und kein Ausweg genannt wird
• Skripte, die den Fokus beim Verlassen eines Feldes zurück ins Feld setzen, etwa bei der Prüfung von Eingaben

So prüfen wir das

• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Kann der Fokus jede Komponente per Tastatur wieder verlassen (eingebettete Player und Dialoge beachten)?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

feld.addEventListener("blur", () => {
  if (!feld.checkValidity()) feld.focus();
});

feld.addEventListener("blur", () => {
  fehler.textContent = feld.checkValidity()
    ? ""
    : "Bitte geben Sie eine gültige PLZ ein.";
});

Statt den Fokus zurückzuzwingen, zeigt die Korrektur einen Hinweis an und lässt die Person frei weiterarbeiten.

Praxistipps

• Prüfen Sie besonders Inhalte von Drittanbietern wie Videoplayer, Karten, Chats und Buchungsformulare.
• Ein modaler Dialog mit dialog-Element und showModal() lässt sich in aktuellen Browsern per Esc schließen.

Ratgeber und Muster dazu

• Ohne Maus ans Ziel: Tastatur und FokusViele Menschen bedienen das Web ohne Maus: mit Tastatur, Schaltern, Sprachsteuerung oder Screenreader. Hier lesen Sie, was dafür funktionieren muss und wie Sie den Fokus in modernen Web-Apps richtig führen.
• Cookie-Banner, die niemanden aussperrenDer Cookie-Banner ist oft das Erste, was Besucher sehen, und für manche das Letzte: Wer ihn mit Tastatur oder Screenreader nicht bedienen kann, kommt nicht weiter. So machen Sie ihn für alle bedienbar.
• Modaler DialogFokus beim Öffnen hinein, Escape schließt, Fokus zurück.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 2.1.2 No Keyboard Trap