Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
(Change dialog to region)
(Add notes about iOS / VoiceOver issues with modal dialog, and switch back to using a modal dialog instead of a "region")
Line 1: Line 1:
 
==Example==
 
==Example==
  
Note - not implemented:
+
Notes:
* Constraining keyboard focus within the modal dialog
+
 
 +
* Not implemented:
 +
** Constraining keyboard focus within the modal dialog
 +
 
 +
* Known issues:
 +
** VoiceOver has issues with role="dialog" (and aria-modal="true") on iOS 10 and 11, but not on iOS 9. Specifically, it doesn't read all of the dialog content, and activating the check box jumps focus back to the heading of the dialog.
  
 
<html>
 
<html>
Line 68: Line 73:
 
       //  dialog is _actually_ hidden by CSS (and HTML5)
 
       //  dialog is _actually_ hidden by CSS (and HTML5)
 
       document.getElementById("dialog1").className = "dialog-show";
 
       document.getElementById("dialog1").className = "dialog-show";
       // Also need to use the HTML5 "hidden" attribute, because IE
+
       // Best way to hide content: "display:none" and the hidden attribute
      //  doesn't hide "display:none" content from the accessibility tree
 
 
       document.getElementById("dialog1").removeAttribute("hidden");
 
       document.getElementById("dialog1").removeAttribute("hidden");
  
Line 78: Line 82:
 
       //  document.getElementById("pageContent").className = "body-dimmed";
 
       //  document.getElementById("pageContent").className = "body-dimmed";
 
         document.getElementById("pageContent").setAttribute("aria-hidden", "true");
 
         document.getElementById("pageContent").setAttribute("aria-hidden", "true");
       },100); // Was 2 sec timeout for debugging purposes
+
       },1);
 
     }
 
     }
  
 
     function closeDialog1() {
 
     function closeDialog1() {
 
       document.getElementById("pageContent").setAttribute("aria-hidden", "false");
 
       document.getElementById("pageContent").setAttribute("aria-hidden", "false");
        document.getElementById("modalShadingOverlay").style.display = "none";
+
      document.getElementById("modalShadingOverlay").style.display = "none";
 
     //  document.getElementById("pageContent").className = "";
 
     //  document.getElementById("pageContent").className = "";
  
Line 99: Line 103:
 
         }
 
         }
 
         document.getElementById("dialog1").className = "dialog-hide";
 
         document.getElementById("dialog1").className = "dialog-hide";
         // Also need to use the HTML5 "hidden" attribute, because IE
+
         // Best way to hide content: "display:none" and the hidden attribute
        //  doesn't hide "display:none" content from the accessibility tree
 
 
         document.getElementById("dialog1").setAttribute("hidden", "hidden");
 
         document.getElementById("dialog1").setAttribute("hidden", "hidden");
       },1); // Was 2 sec timeout for debugging purposes
+
       },1);
 
     }
 
     }
 
   </script>
 
   </script>
Line 130: Line 133:
 
   </div>
 
   </div>
  
   <div role="region" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" class="dialog-hide" hidden>
+
   <!-- <div role="region" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" class="dialog-hide" hidden> -->
   <!-- <div role="dialog" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" aria-modal="true" class="dialog-hide" hidden> -->
+
   <div role="dialog" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" aria-modal="true" class="dialog-hide" hidden>
 
     <!-- Mark the beginning of the dialog
 
     <!-- Mark the beginning of the dialog
 
         NOTE: If the Javascript applies "aria-hidden" to ALL of the rest of the page content,
 
         NOTE: If the Javascript applies "aria-hidden" to ALL of the rest of the page content,
Line 138: Line 141:
 
               ARIA must be supported)
 
               ARIA must be supported)
 
     -->
 
     -->
     <span class="sr-only"> Beginning of modal dialog </span>
+
     <span class="sr-only" aria-hidden="true"> Beginning of modal dialog </span>
  
 
     <h1 id="dialog1Title" class="dialog-title">What you need to know about trees</h1>
 
     <h1 id="dialog1Title" class="dialog-title">What you need to know about trees</h1>
Line 177: Line 180:
 
               ARIA must be supported)
 
               ARIA must be supported)
 
     -->
 
     -->
     <span class="sr-only"> End of modal dialog </span>
+
     <span class="sr-only" aria-hidden="true"> End of modal dialog </span>
 
   </div>
 
   </div>
  

Revision as of 05:29, 10 November 2017

Example

Notes:

  • Not implemented:
    • Constraining keyboard focus within the modal dialog
  • Known issues:
    • VoiceOver has issues with role="dialog" (and aria-modal="true") on iOS 10 and 11, but not on iOS 9. Specifically, it doesn't read all of the dialog content, and activating the check box jumps focus back to the heading of the dialog.


...

...