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

Abschnitte der EN 301 549

Der Abschnitt der EN 301 549 zu jedem Kriterium, je Version der Norm
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 anfordern

Oder 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

Nachricht an Validiscan

Für einen kostenlosen Check nennen Sie die Adresse Ihres Shops und seine Plattform.

Validiscan verwendet, was Sie senden, um Ihnen zu antworten. Datenschutzerklärung