Skip to main content

Accessible Modal Dialogs with Vanilla JS

ARIA Modal Dialog Demos

Test page for focusing elements within a dialog.

Test date: August 12, 2018.
Where not specifically noted, tests were performed with the latest version of a browser and/or screen reader.

Test 1: aria-describedby Modal

A modal dialog with an autofocused text field, and an aria-describedby attribute pointing to three elements prior to where focus is placed.

Modal Test 1 details

In this test, the text field is autofocused. An aria-describedby has been added to the modal dialog to point to the three elements (two paragraphs and an unordered list) that serve as introductory content to the dialog.

When the dialog is opened and the text field is focused, the following announcements occur in the noted screen readers:

JAWS 18 & 2018 + IE11 and JAWS 2018 + Chrome

example, dialog.
Paragraph 1. Paragraph 2. Each list item is announced as a single text string (no announcement of bullets).
Text field announcement

JAWS 18 & Firefox ESR, JAWS 2018 + Firefox 63 (Nightly)

example, dialog.
Paragraph 1. Paragraph 2. Each list item is announced as a single text string and bullets are announced prior to each list item.
Text field announcement

JAWS 2018 + Edge

example, dialog.
(aria-describedby content is ignored)
Text field announcement

Narrator + Edge

Dialog, example
Text field announcement
Each list item is announced as a single text string (no announcement of bullets).

NVDA 2018.1 & .2.1 + Chrome

example, dialog.
Paragraph 1. Paragraph 2. Each list item is announced as a single text string (no announcement of bullets).
Text field announcement

NVDA 2018.1 & .2.1 + Firefox 63 (Nightly) & Firefox ESR

example, dialog.
Paragraph 1. Paragraph 2. Each list item is announced as a single text string and bullets are announced prior to each list item.
Text field announcement

VoiceOver + Safari 11.1.1 & .2.1 on macOS High Sierra 10.12.6 & 10.13.6

example, web dialog.
Text field announcement
Paragraph 1. Paragraph 2. Each list item is announced as a single text string (no announcement of bullets).

Note: after closing and opening the dialog again, only "Name: edit text" was announced. Neither being moved to a web dialog, or any of the content from the aria-describedby were announced on subsequent activations of the modal until the page was refreshed.

VoiceOver + Safari on iOS 11.4.1

example, web dialog.
Paragraph 1. Paragraph 2. Each list item is announced as a single text string (no announcement of bullets).
Text field announcement

TalkBack (Android Accessibility Suite 6.2) + Android Chrome

Text field announcement

There is no other information about the dialog announced by TalkBack.

Note that descriptive text / hints can be disabled with screen readers. In such situations, the aria-describedby content would not be announced.

Test 2: aria-describedby Modal

A modal dialog with an autofocused text field, and an aria-describedby attribute pointing to a single element containing the content prior to where focus is placed.

Modal Test 2 details

In this test, the text field is autofocused. An aria-describedby has been added to the modal dialog to point to the container of the introductory content (two paragraphs and an unordered list) so as to only have to maintain a single ID for the aria-describedby.

When the dialog is opened and the text field is focused, the following announcements occur in the noted screen readers:

JAWS 18 & 2018 + IE11 and JAWS 2018 + Chrome

example, dialog.
Paragraph 1. Paragraph 2. Each list item is announced as a single text string (no announcement of bullets).
Text field announcement

JAWS 18 & Firefox ESR, JAWS 2018 + Firefox 63 (Nightly)

example, dialog.
Paragraph 1. Paragraph 2. Each list item is announced as a single text string and bullets are announced prior to each list item.
Text field announcement

JAWS 2018 + Edge

example, dialog.
(aria-describedby content is ignored)
Text field announcement

Narrator + Edge

Dialog, example
Text field announcement
Each list item is announced as a single text string (no announcement of bullets).

NVDA 2018.1 & .2.1 + Chrome

example, dialog.
Paragraph 1. Paragraph 2. Each list item is announced as a single text string (no announcement of bullets).
Text field announcement

NVDA 2018.1 & .2.1 + Firefox 63 (Nightly) & Firefox ESR

example, dialog.
Paragraph 1. Paragraph 2. Each list item is announced as a single text string and bullets are announced prior to each list item.
Text field announcement

VoiceOver + Safari 11.1.1 & .2.1 on macOS High Sierra 10.12.6 & 10.13.6

example, web dialog.
Text field announcement
Paragraph 1. Paragraph 2. The contents of the list are not announced.

Note: after closing and opening the dialog again, only "Name: edit text" was announced. Neither being moved to a web dialog, or any of the content from the aria-describedby were announced on subsequent activations of the modal until the page was refreshed.

VoiceOver + Safari on iOS 11.4.1

example, web dialog.
Paragraph 1. Paragraph 2. The contents of the list are not announced.
Text field announcement

TalkBack (Android Accessibility Suite 6.2) + Android Chrome

Text field announcement

There is no other information about the dialog announced by TalkBack.

Note for tests 1 and 2, if descriptive text / hint announcements are disabled with screen readers, then none of the aria-describedby content would be announced in either test. It would be up to the user to navigate to the content to have it announced.

Test 3: Focused Heading Modal

A modal dialog where the heading is autofocused.

Modal Test 3 details

When the dialog is opened and the heading is focused, the following announcements occur in the noted screen readers:

JAWS 2018 + IE11, Chrome, Firefox 63 (Nightly) and JAWS 18 + IE11 & Firefox ESR

example dialog, example heading level 2

JAWS 2018 + Edge

example dialog, example

Narrator + Edge

Dialog, example. Focus on example. At level 2

Immediately hitting tab to enter the text field, "example" will be announced prior to the text field announcement.

NVDA 2018.1 & .2.1 + Chrome, Firefox 63 (Nightly) & Firefox ESR

example, dialog. example, heading level 2 example, heading level 2 example (begins reading out the remainder of all contents in the dialog)

Using the virtual cursor, or hitting control to stop announcements, at any point during the read out, will keep the virtual cursor right where NVDA left off, allowing a user to navigate from that point in the dialog.

VoiceOver + Safari 11.1.1 & .2.1 on macOS High Sierra 10.12.6 & 10.13.6

Example, web dialog, heading level 2 example

VoiceOver + Safari on iOS 11.4.1

example, web dialog, example heading level 2

Swiping through content, entering the text field, "example, web dialog" will be announced prior to the text field announcement.

TalkBack (Android Accessibility Suite 6.2) + Android Chrome

example, heading 2, double tap to activate (because of the tabindex=-1)

Unlike with VoiceOver, TalkBack allows for a backwards swipe to focus the dialog container itself. It will then announce "example, dialog" and then begin sequentially reading the contents of the dialog.

Test 4: Focused Close Button

A modal dialog where the close button is the first element in the dialog, and is autofocused.

Modal Test 4 details

When the dialog is opened and the first element, the close button, is focused, the following announcements occur in the noted screen readers:

JAWS 18 & 2018 + IE11

Example Dialog. Close
or
Example Dialog. Close Button

Intermittently the "button" role is dropped from the announcement.

JAWS 2018 + Edge, Chrome, Firefox 63 (Nightly) and JAWS 18 & Firefox ESR

Example Dialog. Close button

Narrator + Edge

Dialog, example. Focus on close, button.

NVDA 2018.1 & .2.1 + Chrome, Firefox 63 (Nightly) & Firefox ESR

Example dialog, close button. Example, button close.

NVDA will begin reading the contents of the dialog in sequential order. Using the virtual cursor, or hitting control to stop announcements, at any point during the read out, will keep the virtual cursor right where NVDA left off, allowing a user to navigate from that point in the dialog.

VoiceOver + Safari 11.1.1 & .2.1 on macOS High Sierra 10.12.6 & 10.13.6

Example, web dialog. Close Button.

VoiceOver + Safari on iOS 11.4.1

Example, web dialog. Close Button.

TalkBack (Android Accessibility Suite 6.2) + Android Chrome

Close Button

Unlike with VoiceOver, TalkBack allows for a backwards swipe to focus the dialog container itself. It will then announce "example, dialog" and then begin sequentially reading the contents of the dialog.

Test 5: Focusing the Modal Dialog

A modal dialog where the dialog itself is focused.

Modal Test 5 details

When the dialog is opened the dialog itself is focused.

Often the screen reader will announce the dialog role, its accessible name, and the first element within the dialog (in these tests, the heading).

The following are the specific announcements that occur in the noted screen readers:

JAWS 18 & 2018 + IE11

example dialog, example heading level 2

Pressing down arrow skips past the heading, announces a 'blank', and next down arrow announces the next paragraph.

JAWS 2018 + Edge

example dialog

Pressing down arrow skips past the heading, announces a 'blank', and next down arrow announces the next paragraph.

Tabbing into the text field will trigger forms mode and announce "example dialog" and then the text field announcement.

JAWS 2018 + Firefox 63 (Nightly), and JAWS 18 & Firefox ESR

Example dialog, page has 1 heading and no links.

JAWS will begin reading the contents of the dialog in sequential order. Using the virtual cursor, or hitting control to stop announcements, at any point during the read out, will keep the virtual cursor right where JAWS left off.

JAWS 2018 + Chrome

Example dialog

Pressing down arrow skips past the heading, announces a 'blank', and next down arrow announces the next paragraph.

Narrator + Edge

Example, dialog

Immediately hitting tab to enter the text field, "dialog example" will be announced prior to the text field announcement.

NVDA 2018.1 & .2.1 + Chrome, Firefox 63 (Nightly) & Firefox ESR

Example. (no dialog role announcement)

NVDA will begin reading the contents of the dialog in sequential order. Using the virtual cursor, or hitting control to stop announcements, at any point during the read out, will keep the virtual cursor right where NVDA left off, allowing a user to navigate from that point in the dialog.

NVDA 2018.2.1 + IE11

Example, dialog. Heading level 2, example

Pressing down arrow will result in NVDA announcing the first paragraph of the dialog.

VoiceOver + Safari 11.1.1 & .2.1 on macOS High Sierra 10.12.6 & 10.13.6

example, web dialog. [pause] You are currently on a web dialog inside of web content... [continue VO instructions]

VoiceOver + Safari on iOS 11.4.1

Example, web dialog. Example, heading level 2.

VO will automatically move focus to the first element of the dialog (resulting in the "example, heading level 2" announcement).

TalkBack (Android Accessibility Suite 6.2) + Android Chrome

example, dialog.

After announcing "example, dialog", TalkBack will begin sequentially announcing the contents of the dialog.