Results
New Test
Browser
| Expectation | Chrome (Win) | Chrome (Mac) | Firefox (Win) | Firefox (Mac) | Edge (Win) | Safari (Mac) | Safari (iOS) | Chrome Android |
|---|---|---|---|---|---|---|---|---|
| Does focus move into the dialog? | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Not tested |
| Does focus stay in the modal dialog? | Yes, but focus can move to browser chrome, which is expected behavior. | Yes, but focus can move to browser chrome, which is expected behavior. | Yes, but focus can move to browser chrome, which is expected behavior. | Yes, but focus can move to browser chrome, which is expected behavior. | Yes, but focus can move to browser chrome, which is expected behavior. | Yes, but focus can move to browser chrome, which is expected behavior. | Yes, but moves to browser chrome when reading all, which is expected behavior. | Not tested |
| Can focus leave the the non-modal dialog? | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Not tested |
| Does focus return to the dialog trigger button when closed? | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Not tested |
| Does Autofocus work? | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Not tested |
Screenreader
| Expectation | JAWS 2024 with Chrome | JAWS 2024 with Firefox | JAWS 2024 with Edge | NVDA with Chrome | NVDA with Firefox | Narrator on Edge | VoiceOver on Mac with Safari | VoiceOver on iOS with Safari | Talkback on Android with Chrome |
|---|---|---|---|---|---|---|---|---|---|
| Does the screen reader mention "Dialog" when the modal dialog opens? | Yes | Yes | Yes | Yes | Yes | Yes, but only if aria-label/ledby is present | Yes | Yes, but only when all contents are read or if aria-label / aria-labelledby are present | Not tested |
| Does the screen reader mention "Dialog" when the non-modal dialog opens? | Yes! | Yes! | Yes! | Yes! | Yes! | No | Yes! | No, only announces the first focused element | Not tested |
| Does adding role="dialog" make the screen reader acknowledge the dialog? | No Change | No Change | No Change | No Change | No Change | No change | No change | No change | Not tested |
| Does the screen reader stay in the modal dialog element? | Yes, but browser chrome is focusable | Yes, but browser chrome is focusable | Yes, but browser chrome is focusable | Yes, but browser chrome is focusable | Yes, but browser chrome is focusable | Yes, but browser chrome is focusable | Yes, but browser chrome is focusable | Yes, but browser chrome is focusable | Not tested |
| Does the screen reader stay in the non-modal dialog element? | No, continues into normal DOM flow | No, continues into normal DOM flow | No, continues into normal DOM flow | No, continues into normal DOM flow | No, continues into normal DOM flow | No, continues into normal DOM flow | No, continues into normal DOM flow | No, continues into normal DOM flow | Not tested |
| Does the screen reader announce the "aria-labelledby" on the | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | |
| Does the screen reader announce the "aria-label" on the | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
Conclusion (New Test)
The dialog element can be used to make an easy modal window now. It works, focus and screen readers stay inside the modal window. Screen readers are inconsistent with how to treat non-modal dialogs, though this is less of an issue.
Adding role=dialog is possbile, but seems unnecessary as it does not appear to change anything. Instead, having aria-label or aria-labeledby is more compelling as it forces the announcement of "dialog" every time.
The <dialog> element with showModal() looks to be the preferred way of doing things.
Test and Version details (New Test)
- JAWS 2024.2310.70 with Chrome 119.0.6045.200
- JAWS 2024.2310.70 with Firefox 120.0
- JAWS 2024.2310.70 with Edge Edge 119.0.2151.93
- NVDA 2023.3.0.29780 with Chrome 119.0.6045.200
- NVDA 2023.3.0.29780 with Firefox 120.0
- Narrator on Windows 11 Pro, 10.0.22631 with Edge 119.0.2151.93
- VoiceOver (macOS) 14.1.1 on Safari 17.1 (19616.2.9.11.7)
- VoiceOver (iOS) 17.1.1 on Safari 17.1.1
Original Test
Browser
| Expectation | Chrome on Win10 | Firefox on Win10 | Safari on Mac | Edge on Win10 | Safari on iOS | Chrome on Android |
|---|---|---|---|---|---|---|
| Does focus move into the dialog? | Yes | Yes | Yes | Yes | Yes | Yes |
| Does focus stay in the modal dialog? | Yes, but focus can move to the elements of the browser | Yes, but focus can move to elements of the browser, and the webpage element (but not elements inside the webpage) | Yes, but focus can move to the elements of the browser | Yes, but focus can move to the elements of the browser | Yes, but focus can move to the elements of the browser | Yes, but focus can move to the elements of the browser |
| Can focus leave the the non-modal dialog? | Yes | Yes | Yes | Yes | Yes | Yes |
| Does focus return to the dialog trigger button when closed? | Yes | Yes | Yes | Yes | Yes | Yes |
Screenreader
| Expectation | JAWS 2022 with Chrome | JAWS 2022 with Firefox | JAWS 2022 with Edge | NVDA with Chrome | NVDA with Firefox | VoiceOver on Mac with Safari | VoiceOver on iOS with Safari | Talkback on Android with Chrome | Narrator on Edge |
|---|---|---|---|---|---|---|---|---|---|
| Does the screen reader mention "Dialog" when the modal dialog opens? | No, just reads the page title when opened. | Yes | No, just reads the page title when opened. | Yes, but it reads the page title first. | Yes | No | No | No | No, just reads the page title when opened. |
| Does the screen reader mention "Dialog" when the non-modal dialog opens? | Yes | Yes | Yes | Yes | Yes | No | No | No | No |
Does adding role="dialog" make the screen reader acknowledge the dialog? |
No Change | No Change | No Change | No Change | No Change | Yes | Sort of, the announcement is unreliable. VoiceOver often tries to say "Web dialog" but then it sometimes gets interrupted by the cancel button text. Seems unreliable and buggy. | No, but it does say "dialog opened" the first time you open the non-modal dialog. Seems unreliable and buggy. | No |
| Does the screen reader stay in the modal dialog element? | Yes | Yes, but you can read the page behind the modal if you move focus out to the webpage container element | Yes | Yes | Yes, but you can read the page behind the modal if you move focus out to the webpage container element | Yes | Yes, but it can leave and read the Safari browser buttons | Yes, but it can leave and read the Chrome browser buttons | Yes, but it can leave and read the buttons in the Edge browser |
| Does the screen reader stay in the non-modal dialog element? | Yes. Note: If you move focus outside the non-modal then the screen reader can read everything on the page. | Yes. Note: If you move focus outside the non-modal then the screen reader can read everything on the page. | Yes. Note: If you move focus outside the non-modal then the screen reader can read everything on the page. | Yes. Note: If you move focus outside the non-modal then the screen reader can read everything on the page. | Yes. Note: If you move focus outside the non-modal then the screen reader can read everything on the page. | No | Yes, but it can leave and read the Safari browser buttons | No | No |
Conclusion
The dialog element can be used to make an easy modal window now. It works, focus and screen readers stay inside the modal window. Screen readers are inconsistent with how to treat non-modal dialogs, though this is less of an issue.
It's best practice to still add role="dialog" to help some screen readers announce the presense of the dialog, and adding it doesn’t break anything.
To help users know they are in a dialog, you could make the button text clear that it opens a dialog, and/or add hidden text at the top and bottom of your dialog that specify where the dialog starts and ends.