WHEN I use the arrow keys or ctrl + tab to move focus to the launch button AND THEN use spacebar to activate the button
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 ctrl + tab key
I SEE focus moves to interactive controls in the dialog
Or when I use the ctrl + tab key to move focus to the dismiss/close button AND THEN use the spacebar to activate the dismiss/close button
I SEE focus returns to the launch button
2
VoiceOver
screenreader
WHEN I use a screenreader
AND
I swipe to focus to the launch button
I HEARthe dialog describes its purpose or title on launch
I HEARit identifies itself as a dialog
I HEARwhen closed, focus returns to the launch button
I HEARwhen open, content behind the dialog 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
Then when I swipe to move focus to the dismiss/close button AND THEN double tap on the close button
I HEARfocus returns to the launch button
3 Device settings
When I use Text resizeI SEEtext content can resize up to 200% without losing information
1 Keyboard actions
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
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 the launch button
State
When open, content behind the dialog remains inert
4 Device settings
When I use
I see
Text resize
Text content can resize up to 200% without losing information
Usage
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.