Closing a dialog must return focus to its opener

Rule dialog-focus-return · Component patterns (best practice) · impact serious · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A keyboard or screen-reader user who opens a dialog and closes it expects to land back on the button that opened it. If focus is instead dropped to the page , they are thrown to the top of the page and lose their place. The engine opens each unambiguous dialog trigger, closes it with Escape, and checks where focus landed.

How to fix#

When the dialog closes, move focus back to the element that opened it (store the opener on open, call opener.focus() on close). A native

<button aria-haspopup="dialog" onclick="openModal()">Open dialog</button>

<dialog id="d"><button autofocus>Close</button></dialog><button aria-haspopup="dialog" onclick="d.showModal()">Open dialog</button>