ARIA Dialog Role

From Level Access Web Labs
Jump to: navigation, search

Notes

This example provides a popup with a role of dialog with an aria-labelledby and aria-describedby reference. Focus is not restricted to the dialog in this example.

Don't set focus to role dialog as screen reader virtual cursor is not working right with arrows if focus is set to role dialog.

Warning: aria-modal="false" set. Adding aria-modal="true" causes huge problems with iOS 10.x/10.2. If it is added the dialog title and instructions are not accessible in the reading order.

Example

Assistive technology support for aria-modal-false

  • JAWS 18 hides other content outside no matter what aria-modal is set to.
  • NVDA 2017.2 (Firefox) hides other content outside no matter what aria-modal is set to. Starting with NVDA 2017.4 NVDA remains in Browse mode when a dialog is displayed.
  • iOS 10.3.3 and VoiceOver do not do anything differently with modal set to false.