Skip to main content

Accessible Modal Dialogs with Vanilla JS

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

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.

Additional Tests