- Success Criterion 2.4.3
- Conformance level A
Background Page Still Tabbable Behind an Open Modal
2.4.3 — Focus Order
Scenario
Setting
A fitness app's workout tracker
What’s wrong
Background page remains tabbable behind an open modal/overlay — focus not contained while the dialog blocks the view.
Example
<div class="dashboard">
<button>View progress</button>
<button>Settings</button>
</div>
<div id="log-modal" class="modal open">
<input placeholder="Reps">
<button>Save</button>
</div> Why it matters
Tabbing past the Save button in the workout modal lands the user back on hidden dashboard buttons like Settings, which they can't see behind the overlay.
How to test
Open a modal and Tab repeatedly: if you can still reach controls in the background page behind the modal, the background isn't properly excluded from the tab order.
How to fix
aria-modal is a hint to assistive tech; inert (or an actual focus trap) is what actually stops Tab from reaching the background.
<div class="dashboard" inert>
<button>View progress</button>
<button>Settings</button>
</div>
<div id="log-modal" class="modal open" role="dialog" aria-modal="true">
<input placeholder="Reps">
<button>Save</button>
</div> Outcome
A user tabs within the workout modal only, cycling between its own fields until they close it.
Who is affected
Keyboard users logging a workout can accidentally trigger background controls they cannot visually confirm.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Tab Order That Jumps Around the Page Illogically
- Dialog That Opens Far From the Button That Triggered It
- Visual Layout Order That Doesn’t Match the Keyboard Tab Order
- Modal That Opens Without Moving Keyboard Focus Into It
- Modal That Closes Without Returning Focus to Its Trigger
- Expanded Content That Never Receives Keyboard Focus