# Tastaturfalle: WCAG 2.1.2 erklärt und behoben

Source: https://allyway.ai/de/glossary/tastaturfalle

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](https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html) ist ein Kriterium der Stufe A in [WCAG 2.2](https://allyway.ai/de/regulations/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](https://allyway.ai/de/regulations/en-301-549) (Abschnitt 9.2.1.2) gilt das auch für das [Barrierefreiheitsstärkungsgesetz](https://allyway.ai/de/regulations/bfsg).

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 |

> **Note:** > **Gewollte Fokusfalle oder Tastaturfalle?**
> Entwickler sprechen von „Focus Trap“, wenn sie den Fokus absichtlich in einem modalen Dialog halten. Zur Tastaturfalle im Sinne von WCAG wird das erst, wenn es keinen Ausweg per Tastatur gibt.

## Praxisbeispiele

```html title="Beispiel"
<!-- 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.

**Do:** Do

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.

**Don't:** Don't

`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](https://allyway.ai/de/glossary/tastaturbedienung) auf. Testen Sie mit deutlichem Fokusrahmen – ohne [sichtbaren Fokus](https://allyway.ai/de/glossary/fokus-sichtbar) erkennen Sie kaum, ob der Fokus festhängt oder nur unsichtbar ist.

## So finden Sie eine Tastaturfalle



## Häufige Fragen

Q: Was ist eine Tastaturfalle?
A: 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.

Q: Ist eine Fokusfalle in einem modalen Dialog ein WCAG-Verstoß?
A: 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.

Q: Welche Tasten gelten als Standardmethode zum Verlassen?
A: 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.

Q: Gilt WCAG 2.1.2 auch für eingebettete Inhalte von Drittanbietern?
A: 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.

Q: Wie finde ich eine Tastaturfalle auf meiner Website?
A: 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](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites).