Keyboard focus must never get trapped
A keyboard trap stops a customer completely: once focus is stuck inside a widget such as a video player, chat window or embedded payment field, they cannot reach the rest of the page or the checkout button, and the only way out is to leave the shop.
- Rule id
- vs-keyboard-trap
- Source
- Validiscan check
- Impact
- Critical
- Fix tier
- MANUAL
- on Shopify, Shopware, WooCommerce and Magento
- Status
- runs
What the check does
Follows the Tab sequence and detects loops and dead ends where keyboard focus cannot move on from, or back out of, a component (2.1.2).
The check sorts the visible, keyboard-reachable elements into tab order: positive tabindex values first, ascending, then document order. It focuses the first that accepts focus, then presses the Tab key up to 200 times. If focus leaves the document, or the presses run out, nothing is reported.
A stall is focus staying on one element for 8 presses in a row. On an iframe, object or embed the check moves focus past it after 3 presses, so traps inside it go unreported. A loop is focus returning to an element already visited. A loop holding the first focused element and either the last tab stop or at least 80 percent of the tab stops is a complete pass; other loops are reported on their nearest common container.
The check then presses Escape and Tab. A trap that Escape releases, or any trap inside a dialog, role="dialog", role="alertdialog" or aria-modal="true" element, goes to needs review, which the scanner does not turn into findings today. Shift+Tab is not tested.
How to fix it
Find the component that captures focus (often a third-party widget or a custom modal) and make sure Tab and Shift+Tab can leave it, or that Escape closes it and returns focus to the page. Walk the full keyboard path by hand after the change.
WCAG success criteria
- 2.1.2 No Keyboard Trap, level A
EN 301 549 clauses
| WCAG criterion | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.1.2 | 9.2.1.2 | 9.2.1.2 |
Start with a free check of your shop.
Send your shop’s address. Validiscan scans it and replies with every failure the scan can prove, with the page and the code.
Request a free checkOr write to info@validiscan.com.
What the free check covers, and what it leaves out- You send
- your shop’s address
- Pages scanned
- up to 15
- You get
- every failure the scan can prove, with the page and the code
- On your shop
- public pages only; no login, nothing bought, no forms sent
- What it is not
- a full audit