WAI-ARIA APG: Dialog Modal Pattern
Defines modal dialog behavior, inert background content, contained tab sequence, Escape dismissal, focus placement, and focus return.
What this source can teach
Use this source to check a technical or accessibility requirement against its exact wording and scope.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Alert dialog | Choose an alert dialog when an important message interrupts the current workflow and requires an immediate user response. | The alert dialog appears only for a condition that genuinely requires a response before continuation. | Modal dialog guidance supplies the focus containment, inert background, Escape, initial-focus, and focus-return behavior. |
| Confirmation dialog | Choose confirmation when the action has a clear reason not to proceed and the user may change their mind after seeing the consequence. | The confirmation appears only after a user-initiated action, not as surprise interruption unrelated to the current command. | Modal dialog guidance supplies the underlying focus containment, Escape, inert background, and focus-return behavior for confirmation dialogs. |
| Drawer | Choose drawer when users need page-adjacent detail, preview, metadata, comments, simple actions, or object inspection without leaving the current page. | The opener names or is adjacent to the object whose detail will appear in the drawer. | Modal dialog focus and inert-background guidance informs the accessibility requirements when a drawer is intentionally modal. |
| Drawer with no close or return path | Flag this anti-pattern when a temporary drawer has no visible close control, no Escape path, no back-route dismissal, no equivalent for gesture-only close, or no predictable focus return. | Opening the drawer records the opener or selected object as the return target. | Supports Escape dismissal, contained focus, and focus return for modal drawer cases. |
| Full-screen takeover | Choose full-screen takeover when the task is temporary and modal, but needs the whole viewport to be usable. | The opener communicates the object or task that will enter a full-screen temporary mode. | APG modal dialog guidance supplies inert background, contained focus, Escape, initial focus, and focus-return requirements. |
| Modal dialog | Choose a modal dialog for a short contained task that must temporarily suspend interaction with the page behind it. | Opening the modal moves focus to the best starting element inside the dialog, not to the dimmed page. | Defines modal dialog modality, inert background content, contained tab sequence, Escape dismissal, focus placement, and focus return. |
| Modal for nonblocking content | Flag this anti-pattern when content can be read later, ignored safely, dismissed without consequence, or shown near its object without blocking the rest of the page. | Users can continue the primary task while reading or ignoring nonblocking information. | Defines the focus, inert background, Escape, and focus-return requirements that make unnecessary informational modality costly. |
| Sheet | Choose sheet when the user starts a short child task tied to the current page and needs a roomy temporary surface with title, actions, and a controlled close path. | The opener explains why the sheet appears and which parent object or task it belongs to. | Modal dialog accessibility guidance applies to modal sheets that make the parent view inert. |
Comparisons supported by this source
- Alert dialog vs alert vs modal dialog vs confirmation dialog
APG modal dialog guidance defines inert background behavior, contained tab sequence, Escape behavior, focus placement, and focus return.
- Drawer with no close or return path vs drawer vs modal dialog vs navigation drawer vs details panel
Supports Escape dismissal, contained focus, and focus return requirements for modal surfaces, which apply when a drawer is intentionally modal.
- Full-screen takeover vs modal dialog vs sheet vs single-page form
APG modal dialog guidance supplies the inert background, contained focus, Escape, and focus-return requirements.
- Modal dialog vs confirmation dialog
APG defines modal dialog modality, inert background behavior, contained tab sequence, Escape dismissal, and focus return.
- Modal for nonblocking content vs modal dialog vs popover vs drawer vs inline message
Supports the rule that modal dialogs make background content inert, contain Tab movement, support Escape where appropriate, and return focus after close.
- Sheet vs drawer vs modal dialog vs alert dialog
Modal dialog focus and inert-background guidance applies when a sheet is modal.
Evidence Role
This source is treated as spec evidence. Its value comes from the specific claims and setting described above.
Publisher: W3C Web Accessibility Initiative. Last checked: .