ARIA Modal Dialog Demos
The following example, and each of the linked example tests showcase different features of the modal dialog script.
For more information about the functionality and options of these examples, see the modal dialog documentation on GitHub.
Test information
Each dialog (presented here and on linked pages) may have different initial focus placements, for testing purposes. There may be some initially focused items that result in verbose announcements, for demonstrative purposes. Such examples should likely be avoided in production.
When each dialog is open, focus (via tab key or virtual cursor) should not be able to reach the document beneath the dialog. Browser chrome controls (browser buttons and address bar, etc.) should remain accessible via other means (for example, hitting the F6 key to focus a browser's address bar).
Dialogs have been tested with:
- JAWS 18 & 2018 with Firefox (ESR 52), Chrome (latest) and Internet Explorer 11.
- NVDA 2018.1 & 2018.2.1 with Firefox (ESR 52) and Chrome (latest)
- VoiceOver + macOS High Sierra and iOS 11.4
- TalkBack + Chrome on Android Oreo
Basic Modal Dialog Example
Privacy Information
We heard you like to know about updates to privacy policies. So you should be pleased to know we've updated our privacy policy.
Please contain your excitement.
Basic Modal Dialog test details
The button to activate the modal dialog is assigned its own unique ID, when activated the ID of the specific button used will be stored in a var. The ID will be referred to again when the dialog is closed and focus needs to return to the specific element that opened it.
A close button is auto-generated from the script, as there are no manually coded close buttons within the dialog.
In this example the dialog container is focused by default. This will result in JAWS + Firefox and VoiceOver (on desktop) announcing the accessible name and role of the dialog when its opened.
With JAWS and Internet Explorer 11, the accessible name and role of the dialog will be announced, and then the first child element of the dialog, and its role, will be announced.
With NVDA and Firefox, NVDA will announce the accessible name of the dialog, but will not announce the dialog role.
NVDA + Firefox and JAWS + Firefox will treat the focused dialog as if it was a new document loaded, and begin reading the contents of the dialog in sequential order.