Prefer a dialog for brief, focused work that benefits from staying in context. Consider inline editing before interrupting the page.
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 page instead when
- Long forms or multi-step flows: a page is usually easier to navigate and resume.
- A task that needs interaction or comparison with content hidden behind the overlay.
Example
Website redesign
Rename this project without leaving the page.
Implementation
- 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. Preserve costly drafts and make any discard behavior clear.
Tradeoffs
A modal keeps the underlying page in place but blocks interaction with it. A page better accommodates extended work and ordinary browser navigation; a dialog needs explicit routing if it must be linkable.
Verification
Can you open, complete and cancel the task with a keyboard and screen reader, then resume where you left off? Check small screens and zoom too.