Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
(Add notes about iOS / VoiceOver issues with modal dialog, and switch back to using a modal dialog instead of a "region")
(Add a close dialog button at the start of the dialog, and move focus to it when the dialog opens)
Line 78: Line 78:
 
       setTimeout(function(){
 
       setTimeout(function(){
 
         focusStack.push(document.activeElement);
 
         focusStack.push(document.activeElement);
         document.getElementById("dialog1").focus();
+
         <!-- document.getElementById("dialog1").focus(); -->
 +
        document.getElementById("closeDialog2").focus();
 
         document.getElementById("modalShadingOverlay").style.display = "block";
 
         document.getElementById("modalShadingOverlay").style.display = "block";
 
       //  document.getElementById("pageContent").className = "body-dimmed";
 
       //  document.getElementById("pageContent").className = "body-dimmed";
Line 120: Line 121:
  
 
     <!-- A button to get more info about trees -->
 
     <!-- A button to get more info about trees -->
     <button id="openDialog1" onclick="openDialog1();">More info<span class="sr-only"> about trees - opens modal dialog</span></button>
+
     <button type="button" id="openDialog1" onclick="openDialog1();">More info<span class="sr-only"> about trees - opens modal dialog</span></button>
  
 
     <select id="favoriteTree">
 
     <select id="favoriteTree">
Line 134: Line 135:
  
 
   <!-- <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> -->
 +
  <div role="dialog" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" 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 143: Line 145:
 
     <span class="sr-only" aria-hidden="true"> Beginning of modal dialog </span>
 
     <span class="sr-only" aria-hidden="true"> Beginning of modal dialog </span>
  
 +
    <button type="button" id="closeDialog2" onclick="closeDialog1();">Close<span class="sr-only"> modal dialog </span></button>
 
     <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>
  

Revision as of 04:28, 3 July 2018

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.


...

...