What a modal must guarantee
A modal dialog interrupts the page to demand attention, so it carries strict accessibility duties. Done poorly, keyboard users tab into the page behind it and lose all context. A correct modal manages focus carefully from open to close.
- Move focus in to the dialog or its first control when it opens.
- Trap focus so Tab cycles only within the dialog.
- Restore focus to the trigger when the dialog closes.
Labeling and dismissal
The dialog itself needs an identity and predictable controls.
- Mark the container as a dialog so assistive tech announces its nature.
- Give it an accessible name, often from its visible heading.
- Allow the Escape key to close it for a fast exit.
Hiding the background
While the dialog is open, the rest of the page should be inert so it cannot receive focus or be read.
- Prevent background controls from being tabbed to.
- Hide background content from assistive tech so only the dialog is present.
- Avoid letting screen readers wander into the page behind.
Why restore matters
Returning focus to the element that opened the dialog keeps the users place intact. Without it, focus jumps to the top of the page and the user must hunt for where they were.
Key idea
An accessible modal moves focus in, traps it inside, names the dialog, closes on Escape, and restores focus to the trigger on close.