Modals done correctly.
WHAT A DIALOG MUST DO
Trap focus within itself while open Return focus to what opened it when closed Close on escape Be announced as a dialog Prevent interaction with the page behind
WHAT MOST IMPLEMENTATIONS OMIT
All of those except the visual overlay.
WHAT THAT PRODUCES
Keyboard users tabbing into the page behind, invisibly.
WHAT TO USE
The native dialog element, or an established accessible library.
WHY
Correct behaviour is intricate, and reimplementing it reliably is difficult.
WHAT TO SET
An accessible name for the dialog Focus moved to the dialog, or to its first control, on opening
WHAT TO BE CAREFUL WITH
Scrolling behind the dialog Dialogs opening dialogs Content taller than the screen on mobile
WHAT TO AVOID
Using a dialog where a page would serve Dialogs interrupting without cause
WHY
They demand attention and block everything else.
WHAT TO TEST
Opening, navigating and closing entirely by keyboard.
