Sources take different approaches
W3C APG describes Escape closing a modal dialog. USWDS also supports forced-action modals that require a choice before dismissal. For this guide, we choose the W3C APG interaction: support Escape and a clear Cancel or Close action. Preserve costly drafts so leaving the dialog does not silently destroy substantial work.
Preferred source: W3C APG · Modal dialog pattern. W3C APG is our preferred source for modal keyboard and focus behavior. We do not adopt the USWDS forced-action variant in this guide. Preserving costly drafts is our additional usability safeguard, rather than a draft-storage rule prescribed by APG.
Compare: USWDS · Modal guidance. How we choose sources.
Recommendation
Choose by task and interaction: a modal for a short task that temporarily blocks the page, a non-modal drawer when users need to work with the page, and a separate page for extended work. Consider inline editing for a small local change.
Preserve costly drafts. Escape or Close must not silently discard substantial user input. Keep the draft available when the user returns, and make any deliberate discard action explicit. This is our safeguard for dismissible dialogs.
Problem
I need the user to complete a secondary task.
Use a modal when
- Renaming an item or making one focused choice.
- The user should return to exactly the same place afterward.
Use a drawer or page instead when
- Use a non-modal drawer when users need to reference or interact with the page alongside a focused secondary task.
- Use a separate page when the work is long, independent, or needs substantial navigation and space.
Example
Website redesign
Rename this project without leaving the page.
Implementation
- Choose modal behavior before positioning the surface. If a side panel blocks the page, follow the same modal focus rules; if users must work in both areas, use a non-modal layout and verify movement between them.
- Prefer native <dialog> opened with showModal(). Give it a visible title linked with aria-labelledby and a clear Cancel or Close button.
- Choose initial focus for the task: a field for a short edit, or a heading for longer structured content. Keep the background inert and Tab focus inside.
- Support Escape. Return focus to the opener, or a logical next step if the opener is gone or the workflow has moved on.
- Treat dismissal separately from saving or discarding. Preserve costly drafts when the dialog closes, restore them when it is reopened, and make any deliberate discard action clear.
Tradeoffs
A modal keeps the page in place but blocks interaction with it. A non-modal drawer can keep the page usable, at the cost of space for both areas. A modal drawer has the same blocking behavior as a centered modal. A separate page provides room and ordinary navigation for extended work.
Verification
Can you open, complete and dismiss the task with a keyboard and screen reader, recover a costly draft after reopening, and resume where you left off? Check small screens and zoom too.