Given that I am on a screen with a full screen dialog
| When I use | I see/hear |
|---|---|
| Launch button | Focus visibly moves to the open dialog itself |
| Arrow keys | Content within the dialog is browsed in meaningful order |
| Tab | Focus visibly moves to interactive controls in the dialog |
| Escape | If dismissible, the dialog closes and returns focus to the button that launched it |
| Space or enter | Any buttons are activated |
| When I use | I hear |
|---|---|
| Swipe | Focus moves within the dialog and doesn't enter the rest of the page |
| Doubletap | Activates controls |
| 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 |
Full-screen dialogs fill the entire screen, displaying actions that require a series of tasks to complete. They’re often used for creating a calendar entry.
Dialogs are purposefully interruptive, so they should be used sparingly. A less disruptive alternative is to use a menu, which provides options without interrupting a user’s experience.