As an Assistive Technology (AT) user, I want to be informed that a modal dialog has opened, what its purpose is, and how to action / close it.
The modal dialog must:
- Be focusable with a keyboard. (If an element eg. button triggers the dialog, that element must also be keyboard focusable.)
- Inform user that an alert dialog has opened
- Constrain focus to dialog
- Return focus to element that had focus before the dialog was invoked.
- Be possible to close. Be clear how to close. Examples of ways to close are pressing Esc and a close button.
- Underlying page content must not look actionable.
- Prevent user searching in the underlying page.
- Prevent scrolling of the underlying page.
- Should always be visible - regardless of scrolling, screen size or orientation changes.
Where multiple modals are open, above criteria apply to top-most one.
In draft: "Screen reader users may not rely on the tab key to interact with the dialogue content. Screen readers have many keyboard commands for interacting with content and it's important that the way the dialogue is implemented doesn't prevent themfrom being usable."
This is a good point. Could we use this as the list of commands for testing?
- Moves focus to the next focusable element inside the dialog.
- If focus is on the last element, moves focus to the first focusable element inside the dialog.
- Moves focus to the previous focusable element inside the dialog.
- If focus is on the first element, moves focus to the last focusable element inside the dialog.
- Closes the dialog.
Regarding points 8 & 9, they would be obstructive if the modal does not contain all information needed to complete the action. Some guidance on usage is probably enough to avoid this.