• Success Criterion 2.1.2
  • Conformance level A

Script That Yanks Focus Back Every Time the User Tabs Away

2.1.2 — No Keyboard Trap

Scenario

Setting

A job board's application form

What’s wrong

focus() handlers yanking focus back whenever the user tabs away (auto-refocus traps).

Example 

resumeInput.addEventListener('blur', () => {
  if (!resumeInput.files.length) {
    resumeInput.focus(); // forces the user back here no matter where they were headed
  }
});

Why it matters

An applicant tabbing toward the next field or the submit button gets yanked back to the resume field every single time.

How to test

Tab away from a control: if a focus() handler yanks focus back immediately, you're trapped in a loop and can never move past it.

How to fix

Validate on submit, not on blur, and show a message rather than forcibly calling focus() back onto the field.

resumeInput.addEventListener('blur', () => {
  if (!resumeInput.files.length) {
    showInlineWarning('Resume required before submitting');
  }
});

Outcome

An applicant tabs freely through the form and only sees the resume warning when they try to submit.

Who is affected

Keyboard-only users are trapped in a single field that refuses to let focus leave, no matter how many times they tab away.

Learn more

Related scenarios