Zu Content springen
Deutsch
Kontakt
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

A: Der Benutzerfokus wird nicht versehentlich in einer Region gefangen gehalten (WCAG 2.1.2)

focus-traps

Das bedeutet

Nutzer und Nutzerinnen müssen mit der Tastatur frei durch alle interaktiven Elemente einer Seite navigieren können. Der Fokus darf sich nicht in einem Bereich „verfangen“ – zum Beispiel in einem Dialog, Modal-Fenster oder eingebetteten Widget. Nutzerinnen und Nutzer müssen in jede Region hinein- und wieder heraus tabben können, ohne den Fokus zu verlieren.

Auswirkung

Wenn der Fokus in einem Bereich feststeckt, können Nutzer und Nutzerinnen andere Teile der Seite nicht mehr erreichen. Das betrifft vor allem Menschen, die ausschließlich mit der Tastatur navigieren oder Screenreader verwenden. Dadurch wird die Bedienung erheblich eingeschränkt und es entsteht ein Verstoß gegen WCAG 2.1.2 (A) Keine Tastaturfalle.

Empfehlung

  • Modale Dialoge oder Overlays so umsetzen, dass der Fokus beim Öffnen in den Dialog gesetzt wird und beim Schließen wieder an die vorherige Position zurückkehrt.

  • Die Tabulator-Reihenfolge darf nicht durch Skripte unterbrochen oder blockiert werden.

  • Innerhalb von eingebetteten Komponenten (z. B. Videos, Widgets, Formularen) darf der Fokus nicht „gefangen“ werden.

  • Prüfen Sie nach jeder Interaktion, ob die Fokussteuerung korrekt funktioniert.

Beispiele

Problematisch:

 <div tabindex="0" onkeydown="event.preventDefault()">...</div>
 

In diesem Fall verhindert das Skript jegliche Tastaturinteraktion. Der Nutzer kann den Bereich nicht mehr verlassen.

Besser:

<div role="dialog" aria-modal="true">
<button>Schließen</button>
</div>

 

Ein korrekt eingerichteter Dialog erlaubt das Navigieren per Tabulator zwischen interaktiven Elementen. Nach dem Schließen wird der Fokus an die ursprüngliche Stelle zurückgegeben.

Hinweis

Die Vermeidung von Fokusfallen ist besonders bei modalen Fenstern, Formular-Widgets und interaktiven Overlays relevant. Testen Sie die Bedienung immer mit der Tastatur, bevor Sie Inhalte veröffentlichen.

 

Verknüpftes WCAG-Kriterium:
WCAG 2.1.2 – Keine Tastaturfalle
Zur offiziellen WCAG-Dokumentation →