- Success Criterion 2.1.2
- Conformance level A
Form Validation Script Creating an Inescapable Refocus Loop
2.1.2 — No Keyboard Trap
Scenario
Setting
A podcast app's episode list
What’s wrong
Validation auto-refocus loops: scripts returning focus to a field (one-time password (OTP), phone, format-masked inputs) until an acceptable value is entered, trapping empty-handed keyboard users.
Example
A podcast app's episode list is a good example: validation auto-refocus loops: scripts returning focus to a field (one-time password (OTP), phone, format-masked inputs) until an acceptable value is entered, trapping empty-handed keyboard users.
Why it matters
All keyboard and screen-reader users who can become stuck inside a component. The practical effect on a podcast app's episode list: they can't operate the feature without a mouse.
How to test
Tab into a field with input validation (OTP, phone, masked format): if a script keeps returning focus to it after every attempt with no way to Tab away while it's empty/invalid, it fails.
How to fix
Focus must always be able to leave the component using Tab/Shift+Tab or Esc (or a standard method the user is told about).
Outcome
That one change on a podcast app's episode list means they reach and operate the control without a mouse.
Who is affected
All keyboard and screen-reader users who can become stuck inside a component.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Keyboard Focus Stuck Inside an Embedded Plugin or Widget
- Modal Focus Trap With No Escape Key or Close Button
- Widget Where Tab Cycles Internally With No Way Out
- Third-Party Embed That Captures and Never Releases Tab Focus
- Script That Yanks Focus Back Every Time the User Tabs Away
- Rich Text Editor That Captures Tab With No Documented Escape