Opening a dialog must move focus into it
Rule
dialog-initial-focus· Component patterns (best practice) · impact serious · Live only (static → incomplete)
Why it matters
When a dialog appears and focus stays on the page behind it, a keyboard user has to Tab blindly toward content they can see but have not reached, and a screen-reader user is not told anything opened at all — the announcement follows focus. Cookie and consent dialogs fail this most often: they cover the page visually while focus is still at the top of the document. The engine opens each unambiguous dialog trigger and checks where focus landed.
How to fix
On open, move focus into the dialog — to its first interactive control, or to the dialog container itself when it has tabindex="-1". A native <dialog> opened with showModal() does this for you, honouring autofocus.
Example
<button aria-haspopup="dialog" onclick="box.hidden=false">Open</button><div id="box" role="dialog" aria-modal="true" hidden><button>OK</button></div>
<dialog id="d" aria-label="Confirm"><button autofocus>OK</button></dialog><button aria-haspopup="dialog" onclick="d.showModal()">Open</button>
WCAG success criteria
2.4.3 Focus Order — Level A
Focus must move in an order that preserves meaning and operability.
Standards
This rule contributes to the following standards:
WCAG A EN 301 549
| Standard | Criteria |
|---|---|
| EN 301 549 | 9.2.4.3 |