Tastaturfalle: WCAG 2.1.2 erklärt und behoben
Also called: Fokusfalle, Keine Tastaturfalle, Gefangener Fokus
Definition
Eine Tastaturfalle ist ein Bereich einer Seite, in den der Tastaturfokus hineinkommt, aus dem er aber nicht allein per Tastatur wieder herauskommt. WCAG 2.1.2 Keine Tastaturfalle verbietet das auf Stufe A.
Eine Tastaturfalle ist eine Stelle auf der Seite, an der der Tastaturfokus hängen bleibt: Nutzer gelangen per Tab in ein Element – einen eingebetteten Videoplayer, eine Karte, ein Chat-Widget, einen fehlerhaften Dialog –, aber keine Taste führt wieder hinaus. Wer keine Maus nutzen kann, erreicht den Rest der Seite nicht mehr und muss oft den Tab schließen.
Was es bedeutet
WCAG 2.1.2 Keine Tastaturfalle ist ein Kriterium der Stufe A in WCAG 2.2. Kann der Fokus per Tastatur auf eine Komponente gesetzt werden, muss er sich auch allein per Tastatur wieder davon wegbewegen lassen. Braucht das mehr als die unveränderten Pfeil- oder Tab-Tasten oder andere Standardmethoden, müssen Nutzer erfahren, wie es geht. Über EN 301 549 (Abschnitt 9.2.1.2) gilt das auch für das Barrierefreiheitsstärkungsgesetz.
Das Kriterium hat eine Sonderstellung. Weil eine Fokusfalle die ganze Seite unbenutzbar machen kann, zählt WCAG es zu den Anforderungen, die alle Inhalte einer Seite erfüllen müssen – auch Widgets von Drittanbietern, die Sie für kein anderes Kriterium heranziehen.
Nicht jede Einschränkung des Fokus ist eine Falle. Das W3C erlaubt ausdrücklich, den Fokus in einem modalen Dialog zu halten, solange Nutzer ihn schließen können:
| Situation | Bewertung |
|---|---|
| Modaler Dialog – Tab kreist darin, Esc oder „Schließen“ beendet ihn | Erlaubt |
| Texteditor – Tab rückt ein, ein Hinweis nennt die Taste zum Verlassen | Erlaubt (Nutzer werden informiert) |
| Eingebetteter Player – Tab und Esc wirken nicht, kein Hinweis | Tastaturfalle – verstößt gegen 2.1.2 |
| Eigenes Widget, das alle Tasten abfängt | Tastaturfalle – verstößt gegen 2.1.2 |
Praxisbeispiele
<!-- Tastaturfalle: Tab wird abgefangen, Esc ignoriert -->
<div class="widget" tabindex="0" onkeydown="event.preventDefault()">…</div>
<!-- Barrierefreier Dialog: Fokus bleibt drin, Esc und Button schließen ihn -->
<dialog id="newsletter" aria-labelledby="nl-titel">
<h2 id="nl-titel">Newsletter abonnieren</h2>
<label for="nl-mail">E-Mail</label>
<input id="nl-mail" type="email">
<button type="button" onclick="this.closest('dialog').close()">Schließen</button>
</dialog>
<script>document.getElementById('newsletter').showModal();</script>Ein natives <dialog>, das mit showModal() geöffnet wird, schließt sich standardmäßig mit Esc. Setzen Sie den Fokus danach zurück auf den Button, der den Dialog geöffnet hat – so machen Nutzer dort weiter, wo sie waren.
Dialoge und Menüs mit Esc schließen lassen, den Fokus danach an den Auslöser zurückgeben, eingebetteten Playern und Karten einen klaren Ausweg per Tastatur geben und jede ungewöhnliche Taste zum Verlassen auf dem Bildschirm erklären.
preventDefault() bei jedem Tastendruck aufrufen, Widgets von Drittanbietern ungetestet einbinden oder einen modalen Dialog ohne Schließen-Button öffnen.
Eine Tastaturfalle fällt meist beim allgemeinen Test der Tastaturbedienung auf. Testen Sie mit deutlichem Fokusrahmen – ohne sichtbaren Fokus erkennen Sie kaum, ob der Fokus festhängt oder nur unsichtbar ist.
So finden Sie eine Tastaturfalle
Häufige Fragen
Was ist eine Tastaturfalle?
Ein Bereich einer Seite, in den der Tastaturfokus hineingelangt, aus dem er aber per Tastatur nicht mehr herauskommt. WCAG 2.1.2 Keine Tastaturfalle (Stufe A) verbietet das.
Ist eine Fokusfalle in einem modalen Dialog ein WCAG-Verstoß?
Nein. Den Fokus in einem offenen modalen Dialog zu halten, ist gewollt – solange Nutzer ihn per Tastatur schließen können, etwa mit Esc oder einem Schließen-Button.
Welche Tasten gelten als Standardmethode zum Verlassen?
WCAG nennt die unveränderten Tab- und Pfeiltasten. Esc ist auf physischen Tastaturen ein gängiger Standard. Braucht Ihr Widget eine andere Taste, etwa Alt+F10, nennen Sie diese auf dem Bildschirm.
Gilt WCAG 2.1.2 auch für eingebettete Inhalte von Drittanbietern?
Ja. Eine Tastaturfalle irgendwo auf der Seite blockiert die ganze Seite. Deshalb müssen alle Inhalte 2.1.2 erfüllen – auch eingebettete Player, Karten und Chat-Widgets.
Wie finde ich eine Tastaturfalle auf meiner Website?
Tabben Sie ohne Maus durch jede Seitenvorlage und jedes Widget. Verwandte Fehler wie Bedienelemente ohne Rolle oder Namen auf der gesamten Website finden Sie zusätzlich mit dem kostenlosen WCAG-Scanner.
Related terms
Tastaturbedienung: WCAG 2.1.1 einfach erklärt
Tastaturbedienung bedeutet, dass sich jede Funktion einer Website allein mit der Tastatur erreichen und bedienen lässt – meist mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten. WCAG 2.1.1 verlangt das auf Stufe A.
Read definition: Tastaturbedienung: WCAG 2.1.1 einfach erklärtSichtbarer Fokus: WCAG 2.4.7 richtig umsetzen
Sichtbarer Fokus bedeutet, dass eine Website das Element, das gerade den Tastaturfokus hat, deutlich markiert – meist mit einem Rahmen. WCAG 2.4.7 verlangt das auf Stufe AA.
Read definition: Sichtbarer Fokus: WCAG 2.4.7 richtig umsetzenSkip-Link: Direkt zum Hauptinhalt springen
Ein Skip-Link ist ein Link ganz oben auf der Seite, der direkt zum Hauptinhalt springt. So müssen Tastatur- und Screenreader-Nutzer nicht auf jeder Seite das ganze Menü durchlaufen. Er ist eine ausreichende Technik für WCAG 2.4.1.
Read definition: Skip-Link: Direkt zum Hauptinhalt springen