spec checked
WAI-ARIA APG: Dialog Modal Pattern
Defines modal dialog behavior, inert background content, contained tab sequence, Escape dismissal, focus placement, and focus return.
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. |
Evidence Role
This source is treated as spec evidence. Use it to validate the decision rules above, not as a visual style reference.
Publisher: W3C Web Accessibility Initiative. Last checked: .