Difference between revisions of "ARIA Dialog Role with modal true"

From Level Access Web Labs
Jump to navigation Jump to search
Line 29: Line 29:
 
     function toggle() {
 
     function toggle() {
 
       document.getElementById("d1").className = "show";
 
       document.getElementById("d1").className = "show";
       setTimeout(function(){document.getElementById("i1").focus();},2000);
+
       setTimeout(function(){document.getElementById("d1").focus();},2000);
 
     }
 
     }
 
     function closeDialog() {
 
     function closeDialog() {

Revision as of 00:30, 16 October 2019

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 with code in this example (although some screen reader implementations may restrict focus).

For older versions of iOS (not the latest) aria-modal="true" causes huge problems with iOS e.g. 10.x/10.2. If focus is set on the dialog title and instructions are not accessible in the reading order. 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.

Example

  • JAWS 18 (Firefox) 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. NVDA 2017.4 Browse mode is on when the dialog appears.
  • iOS with VoiceOver 10+->10.3.3 attempts to block access to content outside the modal but fails by prevent access to some of the dialog as well!