- Success Criterion 3.2.1
- Conformance level A
Tabbing Into a Field That Opens a Modal Automatically
3.2.1 — On Focus
Scenario
Setting
A subscription box service's account settings
What’s wrong
Focusing a field opens a modal/new window automatically.
Example
<input type="text" id="promo-code" onfocus="openUpgradeModal()">Why it matters
Tabbing into the promo code field yanks the user into an upgrade modal they never asked to open, derailing whatever task they were doing in account settings.
How to test
Tab to a field and stop (don't type or press Enter): if a modal or new window opens automatically just from receiving focus, it fails.
How to fix
Trigger modals from an explicit action like a button click, never from onfocus.
<input type="text" id="promo-code">
<button type="button" onclick="openUpgradeModal()">See upgrade offers</button>Outcome
A user tabbing through account settings reaches the promo field without being redirected anywhere.
Who is affected
Keyboard users tabbing through the settings form get an unrequested context change just from reaching this one field.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Element That Loses Focus the Instant It’s Reached
- Tabbing to a Menu Item That Auto-Navigates to Its Page
- Selecting an Option That Submits the Form Automatically
- Keyboard Focus Triggering an Unexpected Scroll Jump
- Tabbing Into a Field That Opens a Chat Widget
- Autofocus Chain That Jumps Focus From One Field to Another