Last tested: 2021.11.01
These tests only work in browsers which support the dialog element. Test results were recorded with latest browser/screen readers available as of the last tested date, using default screen reader settings.
This test uses nothing more than the
dialog element,
and the default functionality of the .showModal() and .close() methods.
| Browser | JAWS | NVDA | Narrator | VoiceOver | TalkBack |
|---|---|---|---|---|---|
| Firefox | "Dialog. My Heading. Have you tried Duck Duck go? I have. Duck Duck go, link." | "Dialog. Have you tried Duck Duck go? Duck Duck go, I have. Duck Duck go, link. Link, Duck Duck go. Clickable checkbox no checked, I have. Button, neat." Heading is not announced | "Link, Duck Duck go? Heading level 1, My Heading. Have you tried, link, Duck Duck, tried, Duck Duck go? value https://duckduckgo.com, editable" Content after the link is not announced, the dialog role is not announced, Narrator inserted an extra "tried" into that announcement - not a typo. | "Link, Duck Duck go" No other announcements made. User must navigate before/after link to read all content. | n/a |
| Chrome | "Link, Duck Duck go? Page has one heading and one link. Link, Duck Duck go? I have checkbox, not checked. Neat, button. Have." No announcement of dialog role, JAWS acts if a new page has loaded and announces number of headings and links, though does not announce heading. Extra "have" at the end there for no apparent reason? | "Dialog. Have you tried Duck Duck go? Duck Duck go? Duck Duck go, link. Link, Duck Duck go. Checkbox not checked, I have. Button, neat." - Note heading is not announced. | "Link, Duck duck go. Heading level 1 My Heading. Have you tried link, Duck Duck go, Duck Duck go." | "Heading level 1, My Heading. Have you tried, link, Duck Duck go? Ha I have, unchecked, checkbox. Neat!, button" After reading, VO focus and keyboard focus on are on the "neat" button, not the "Duck Duck go" link that received initial focus. VoiceOver apparently decided to throw an extra "Ha" into the dialog content announcement for some reason? | "Duck duck go, link". No other announcements made. User must navigate before/after link to read all content. |
| Edge | "Link, Duck Duck go? Page has one heading and one link. Link, Duck Duck go? I have checkbox, not checked. Neat, button. Have." No announcement of dialog role, JAWS acts if a new page has loaded and announces number of headings and links, though does not announce heading. Extra "have" at the end there for no apparent reason? | "Dialog. Have you tried Duck Duck go? Duck Duck go? Duck Duck go, link. Link, Duck Duck go. Checkbox not checked, I have. Button, neat." - Note heading is not announced. | "Link, Duck duck go". No other announcements made. User must navigate before/after link to read all content. | "My Heading and 3 more items. Collapsed group, collapsed link, Duck Duck go. Microsoft Edge has a new Window." | not tested |
| Safari | n/a | n/a | n/a | "Link, Duck duck go". No other announcements made. User must navigate before/after link to read all content. | n/a |
This second test sets focus to the dialog element itself. It has purposefully not been given an accessible name.
| Browser | JAWS | NVDA | Narrator | VoiceOver | TalkBack |
|---|---|---|---|---|---|
| Firefox | "Dialog". User must press tab key or manually enter the dialog to hear and interact with content. | "Heading level 1, My Heading. Have you tried, link, Duck Duck go? clickable checkbox, not checked, I have. Button, neat." Dialog role not announced. | "My Heading. Have you tried, link, Duck Duck, tried Duck Duck go?" - no dialog or heading role announcements. Stops announcing after link. Again, not a typo with the repeat of "tried" and "Duck Duck" again. | "My heading and 3 more items, group" | n/a |
| Chrome | "Heading level 1, My Heading. Page has one heading and one link. Heading level 1, My heading. Have you tried, link, Duck Duck go? Checkbox not checked, I have. Neat, button. Neat." No dialog announcement. Announces headings and links like a new page load. Extra "neat" announcement for this different focus location. | "Heading level 1, My heading. Have you tried, link, Duck Duck go? Checkbox, not checked, I have. Button, Neat." Note - dialog role not announced. | "My Heading. Have you tried, link, Duck Duck go? Duck Duck go." Narrator cursor returns to heading after the final "Duck Duck go" announcement. Tab key will take user to Duck Duck go link. Down arrow will start reading "have you tried paragraph". Dialog role not announced with this test. | "Heading level 1, My Heading. Have you tried, link, Duck Duck go? Ha I have, unchecked, checkbox. Neat!, button" After reading, VO focus and keyboard focus on are on the "neat" button, not the "Duck Duck go" link that received initial focus. VoiceOver apparently decided to throw an extra "Ha" into the dialog content announcement for some reason? | "Dialog, My heading, heading 1. Have you tried question mark." TB stops short of announcing the link, and doesn't attempt to announce anything after it. |
| Edge | "Heading level 1, My Heading. Page has one heading and one link. Heading level 1, My heading. Have you tried, link, Duck Duck go? Checkbox not checked, I have. Neat, button. Neat." No dialog announcement. Announces headings and links like a new page load. Extra "neat" announcement for this different focus location. | "Heading level 1, My heading. Have you tried, link, Duck Duck go? Checkbox, not checked, I have. Button, Neat." Note - dialog role not announced. | "Dialog. My Heading. Have you tried, link, Duck Duck go? Duck Duck go." Narrator cursor returns to heading after the final "Duck Duck go" announcement. Tab key will take user to Duck Duck go link. Down arrow will start reading "have you tried paragraph". | "My heading, and 3 more items, collapsed group." VO focus is placed on the heading. | not tested |
| Safari | n/a | n/a | n/a | "My heading, and 3 more items, group". User can begin navigating through the dialog from the top. | n/a |