ARIA region role with aria-modal

From Level Access Web Labs
Jump to: navigation, search
  • aria-modal is not a valid attribute on role region -- this page is experimental, do not implement.

Notes

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

Warning: adding aria-modal="true" causes huge problems with VoiceOver on iOS 10.x and 11.x and on OSX 10.13.x. If it is added the dialog title and instructions are not accessible in the reading order.

Example

Settings

Use these settings to control your account.

Assistive technology support

  • JAWS 18, VoiceOver OSX 10.13, iOS 10.x and 11.x and NVDA 2018.2.1 with aria-modal true does not restrict access to rest of page and does not indicate that region is modal. It may be aria-modal goes inert when applied to an incorrect role.
  • Navigating in and out of the region is not always announced:
    • Jaws 2018 Windows 10
      • IE11, as I navigate into and out of the region it says nothing special.
      • Edge, it says “Exiting Region” when I leave and “[label for region] Region” when I go back in.
      • Firefox 61.0.1, as I navigate into and out of the region it says nothing special.
    • NVDA 2018.2.1 on Windows 10
      • IE11, as I navigate into the modal from the top or bottom it says “[label for region] region” but leaving it says nothing.
      • Edge, I get the same speech as IE11.
      • Firefox 61.0.1, I get the same speech as IE11.