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

From Level Access Web Labs
Jump to navigation Jump to search
(Example)
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
==Notes==
 
==Notes==
<p>This example provides a popup with a role of dialog with an aria-labelledby and aria-describedby reference.
+
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).
Focus is not restricted to the dialog in this example.</p>
 
  
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.
+
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 -- the dialog name instructions description are not accessible in the reading order.  For older iOS versions 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.  This issue appears to be fixed although it is not marked fixed in this webkit bug (https://bugs.webkit.org/show_bug.cgi?id=174667).
 
 
Warning: 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==
 
==Example==
Line 28: Line 25:
 
   </style>
 
   </style>
 
   <script type="text/javascript">
 
   <script type="text/javascript">
     function toggle() {
+
     function toggle(id) {
       document.getElementById("d1").className = "show";
+
       document.getElementById('d1').className = "show";
       setTimeout(function(){document.getElementById("i1").focus();},2000);
+
       setTimeout(function(){document.getElementById(id).focus();},2000);
 
     }
 
     }
 
     function closeDialog() {
 
     function closeDialog() {
Line 38: Line 35:
 
</head>
 
</head>
 
<body>
 
<body>
<button onclick="toggle();">Open dialog</button>
+
<div><button onclick="toggle('d1');">Open dialog with focus on dialog</button></div>
 +
<div><button onclick="toggle('p1');">Open dialog with focus on heading</button></div>
 +
<div><button onclick="toggle('i1');">Open dialog with focus on checkbox</button></div>
  
 
<div id="d1" tabindex="-1" class="hide" role="dialog" aria-labelledby="p1" aria-describedby="p2" aria-modal="true">
 
<div id="d1" tabindex="-1" class="hide" role="dialog" aria-labelledby="p1" aria-describedby="p2" aria-modal="true">
 
   <div>
 
   <div>
<p class="title" id="p1">Settings </p>
+
<h3 tabindex="-1" class="title" id="p1">Settings </h3>
 
<p id="p2">Use these settings to control your account.</p>
 
<p id="p2">Use these settings to control your account.</p>
 
<label for="i1">Do you like Chocolate? <input id="i1" type="checkbox" /></label>
 
<label for="i1">Do you like Chocolate? <input id="i1" type="checkbox" /></label>
Line 52: Line 51:
 
</body>
 
</body>
 
</html>
 
</html>
* JAWS 18 hides other content outside no matter what aria-modal is set to.
+
* JAWS 18 (Firefox) hides other content outside no matter what aria-modal is set to.
 +
* JAWS 2019 with Chrome announces name and description and restricts focus and virtual cursor to dialog.
 +
* 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 13.1.2 with Safari does announces name and description automatically when checkbox or heading is focused on dialog open.  Does not restricts focus and virtual cursor to dialog.  All content is visible though in browse mode.
 
* 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!
 
* 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!
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 00:40, 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 -- the dialog name instructions description are not accessible in the reading order. For older iOS versions 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. This issue appears to be fixed although it is not marked fixed in this webkit bug (https://bugs.webkit.org/show_bug.cgi?id=174667).

Example

  • JAWS 18 (Firefox) hides other content outside no matter what aria-modal is set to.
  • JAWS 2019 with Chrome announces name and description and restricts focus and virtual cursor to dialog.
  • 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 13.1.2 with Safari does announces name and description automatically when checkbox or heading is focused on dialog open. Does not restricts focus and virtual cursor to dialog. All content is visible though in browse mode.
  • 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!