• 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 

otpInput.addEventListener('blur', () => {
  if (otpInput.value.length < 6) {
    otpInput.focus(); // forces the user to keep trying even if they want to cancel
  }
});

Why it matters

A listener who decides not to verify their phone right now can't tab away from the OTP field to reach the "Cancel" or "Maybe later" button.

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

Let focus move freely and validate on submit, always leaving a visible, reachable way to cancel out of the flow.

otpInput.addEventListener('blur', () => {
  if (otpInput.value.length < 6) {
    showInlineError('Enter all 6 digits to verify');
  }
});
<button onclick="closeVerification()">Maybe later</button>

Outcome

A listener taps "Maybe later," backs out of verification, and returns to browsing episodes.

Who is affected

Keyboard-only users with an incomplete or abandoned code are held in the field indefinitely with no way to back out.

Learn more

Related scenarios