WHEN I use an action that triggers an alert dialog
I SEE the dialog opens
Then when I use the arrow keys
I SEE content in the dialog is browsed in meaningful order and does not leave the dialog
Then when I use the tab key
I SEE focus moves to interactive controls inside the dialog
2 Desktop screenreader
WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver)
AND
I use an action that triggers an alert dialog
I HEARthe dialog describes its purpose or title on launch
I HEARit identifies itself as a dialog
I HEARwhen closed, focus returns to a meaningful place
I HEARwhen open, content behind the modal remains inert
Then when I use the arrow keys
I HEARcontent in the dialog is browsed in meaningful order and does not leave the dialog
Then when I use the tab key
I HEARfocus moves to interactive controls inside the dialog
3
Mobile screenreader
WHEN I use a screenreader
AND
I perform an action that triggers an alert dialog
I HEARthe dialog describes its purpose or title on launch
I HEARit identifies itself as a dialog
I HEARwhen closed, focus returns to a meaningful place
I HEARwhen open, content behind the modal remains inert
Then when I doubletap with the button in focus
I HEARthe dialog opens
Then when I swipe within the dialog
I HEARfocus stays trapped in the dialog
1 Keyboard & screen reader actions
When I use
I see/hear
Launch action
Focus visibly moves to the open dialog
Arrow keys
Content within the dialog is browsed in meaningful order
Tab
Focus visibly moves to interactive controls in the dialog
Space
Any buttons are activated
Enter
Any links or buttons are activated
2 Mobile screenreader gestures
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.
3 Screenreader output
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 a meaningful place
State
When open, content behind the modal remains inert
A
dialog alert
must meet WCAG principles:
1
Perceivable
Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA
2
Operable
Must not trap keyboard users behind the dialog - 2.1.2 A
4
Robust
Conveys the correct name and role 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA
An alert dialog differs from a modal dialog
Alerts are functionally similar to a modal dialog. The primary difference is that an alert may not have a dedicated close button, and require people to take a specific action to dismiss (ex: Are you sure you want to delete your account? Yes / No).