Der Tastaturfokus darf nie festhängen
Eine Tastaturfalle hält Kundinnen und Kunden vollständig auf: Sobald der Fokus in einem Widget wie einem Videoplayer, einem Chatfenster oder einem eingebetteten Zahlungsfeld festhängt, erreichen sie weder den Rest der Seite noch die Schaltfläche zum Checkout, und der einzige Ausweg ist, den Shop zu verlassen.
- Regel-ID
- vs-keyboard-trap
- Quelle
- Validiscan-Prüfung
- Auswirkung
- Kritisch
- Korrekturstufe
- MANUAL
- auf Shopify, Shopware, WooCommerce und Magento
- Status
- wird ausgeführt
Was geprüft wird
Folgt der Tab-Reihenfolge und erkennt Schleifen und Sackgassen, in denen der Tastaturfokus eine Komponente weder nach vorn noch zurück verlassen kann (2.1.2).
Die Prüfung bringt die sichtbaren, per Tastatur erreichbaren Elemente in Tab-Reihenfolge: zuerst positive tabindex-Werte in aufsteigender Folge, dann die Reihenfolge im Dokument. Sie fokussiert das erste Element, das den Fokus annimmt, und drückt danach bis zu 200-mal die Tab-Taste. Verlässt der Fokus das Dokument oder sind alle Tastendrücke verbraucht, wird nichts gemeldet.
Ein Stillstand liegt vor, wenn der Fokus 8 Tastendrücke in Folge auf demselben Element bleibt. Auf einem iframe, object oder embed setzt die Prüfung den Fokus nach 3 Tastendrücken hinter das Element. Fallen darin werden deshalb nicht gemeldet. Eine Schleife liegt vor, wenn der Fokus zu einem schon besuchten Element zurückkehrt. Enthält eine Schleife das zuerst fokussierte Element und dazu entweder den letzten Tabstopp oder mindestens 80 Prozent der Tabstopps, gilt sie als vollständiger Durchlauf. Andere Schleifen werden am nächstgelegenen gemeinsamen Container ihrer Elemente gemeldet.
Danach drückt die Prüfung Escape und Tab. Lässt sich eine Falle mit Escape lösen oder liegt sie in einem dialog oder in einem Element mit role="dialog", role="alertdialog" oder aria-modal="true", landet sie bei „zu prüfen“. Daraus macht der Scanner derzeit keine Befunde. Shift+Tab wird nicht getestet.
So wird es behoben
Finden Sie die Komponente, die den Fokus festhält (oft ein Widget eines Drittanbieters oder ein selbst gebautes Modal), und stellen Sie sicher, dass Tab und Shift+Tab sie verlassen können oder dass Escape sie schließt und den Fokus an die Seite zurückgibt. Gehen Sie nach der Änderung den gesamten Tastaturweg von Hand durch.
WCAG-Erfolgskriterien
- 2.1.2 No Keyboard Trap, Stufe A
Abschnitte der EN 301 549
| WCAG-Kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.1.2 | 9.2.1.2 | 9.2.1.2 |
Beginnen Sie mit einem kostenlosen Check Ihres Shops.
Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.
Kostenlosen Check anfordernOder schreiben Sie an info@validiscan.com.
Was der kostenlose Check umfasst und was nicht- Sie senden
- die Adresse Ihres Shops
- Gescannte Seiten
- bis zu 15
- Sie erhalten
- jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
- In Ihrem Shop
- nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
- Was er nicht ist
- ein vollständiges Audit