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)