Given that I am on a screen with an alert 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 |
| 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 |
| Increase contrast | Focus outline becomes high contrast |
An alert gives people critical information they need right away.
For example, an alert can tell people about a problem, warn them when their action might destroy data, and give them an opportunity to confirm a purchase or another important action they initiated.