Given that I am on a screen with a modal dialog
| When I use | I see/hear |
|---|---|
| Launch button | Focus visibly moves to the open dialog itself |
| Arrow keys or ctrl + tab | Focus visibly moves to interactive controls in the dialog, starting with the first interactive control (typically close button) |
| Escape | If dismissible, the dialog closes and returns focus to the button that launched it |
| Space | Any buttons are activated |
| Enter | Any buttons or links are activated |
| When I use | I hear |
|---|---|
| Swipe | Focus moves within the dialog and doesn't enter the rest of the page. |
| Doubletap | This typically activates most elements. |
| Reads | I hear |
|---|---|
| Name | The dialog describes its purpose or title on launch |
| Role | It identifies itself as a dialog |
| Group | When closed, focus returns to the launch button |
| State | When open, content behind the dialog remains inert |
| When I use | I see |
|---|---|
| Text resize | Text content can resize up to 200% without losing information |
| Increased contrast | Focus outline becomes high contrast |
Modality is a design technique that presents content in a separate, dedicated mode that prevents interaction with the parent view and requires an explicit action to dismiss.
It functionally the same as a bottom slide in sheet that helps people perform a scoped task that’s closely related to their current context.
Use a modal dialog to present simple content or tasks.