- 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
.field-3 { order: 1; } .field-1 { order: 3; } /* tab order scrambled by CSS */Why it matters
Keyboard and screen-reader users who follow focus rather than the pointer.
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
Trap focus inside the open modal (and make the background inert) until it's closed.
<!-- Reorder the actual DOM nodes to match the intended focus sequence -->Focus order should follow a sequence that preserves meaning, matching how the content is meant to be read.
Outcome
On a fitness app's workout tracker, this barrier is gone for keyboard and screen-reader users who follow focus rather than the pointer — they reach the same outcome without extra effort.
Who is affected
Keyboard and screen-reader users who follow focus rather than the pointer.
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