• Success Criterion 2.4.3
  • Conformance level A

Modal That Opens Without Moving Keyboard Focus Into It

2.4.3 — Focus Order

Scenario

Setting

A job board's application form

What’s wrong

Opening a modal without moving focus into it. Tab continues through background page.

Example 

<button onclick="document.getElementById('resume-modal').hidden=false">
  Upload Resume
</button>
<div id="resume-modal" hidden>
  <input type="file">
  <button>Attach</button>
</div>

Why it matters

Tab continues into the Cover Letter field behind the modal, so the applicant edits fields they can't see while the modal floats unnoticed.

How to test

Open a modal and press Tab: if focus continues through the background page instead of moving into the modal, it fails.

How to fix

Toggling visibility isn't enough; focus has to be sent explicitly with .focus().

function openResumeModal() {
  const modal = document.getElementById('resume-modal');
  modal.hidden = false;
  modal.querySelector('input[type="file"]').focus();
}

Outcome

An applicant opens the upload modal and lands right on the file picker, with no disorientation.

Who is affected

Keyboard users applying for jobs can miss the upload modal entirely and keep typing into hidden background fields.

Learn more

Related scenarios