Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
(Add a modalShadingOverlay element to shade the whole page)
(Add aria-describedby on the close modal dialog button)
 
(12 intermediate revisions by the same user not shown)
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 31: Line 36:
 
     }
 
     }
  
−
     #modalOverlay {
+
     .modal-shading-overlay {
 
       width:100%;
 
       width:100%;
 
       height:100%;
 
       height:100%;
Line 56: Line 61:
 
       top:25%;
 
       top:25%;
 
       left:25%;
 
       left:25%;
−
       display:none;
+
       display:block;
 
     }
 
     }
 
   </style>
 
   </style>
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");
  
 
       setTimeout(function(){
 
       setTimeout(function(){
 
         focusStack.push(document.activeElement);
 
         focusStack.push(document.activeElement);
−
         document.getElementById("dialog1").focus();
+
         <!-- document.getElementById("dialog1").focus(); -->
−
         document.getElementById("modalShadingOverlay").css('display', 'block');
+
        document.getElementById("closeDialog2").focus();
 +
         document.getElementById("modalShadingOverlay").style.display = "block";
 
       //  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");
−
       },1); // 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").css('display', 'none');
+
       document.getElementById("modalShadingOverlay").style.display = "none";
 
     //  document.getElementById("pageContent").className = "";
 
     //  document.getElementById("pageContent").className = "";
  
Line 99: Line 104:
 
         }
 
         }
 
         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 117: 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 </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 130: Line 134:
 
   </div>
 
   </div>
  
−
   <div role="dialog" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" aria-modal="true" class="dialog-hide" hidden>
+
   <!-- <div role="region" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" class="dialog-hide" hidden> -->
−
     <!-- Mark the beginning of the dialog for browsers/AT which don't support ARIA.
+
  <!-- <div role="dialog" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" aria-modal="true" class="dialog-hide" hidden> -->
−
         NOTE: If the Javascript doesn't apply "aria-hidden" to ALL of the rest of the page content,
+
  <div role="dialog" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" class="dialog-hide" hidden>
−
               the aria-hidden MUST be removed from the following line.
+
     <!-- Mark the beginning of the dialog
 +
         NOTE: If the Javascript applies "aria-hidden" to ALL of the rest of the page content,
 +
               the following line SHOULD add the attribute aria-hidden="true" (or may be  
 +
              removed completely, unless browser/AT combinations which don't support
 +
              ARIA must be supported)
 
     -->
 
     -->
−
     <span aria-hidden="true" class="sr-only"> Beginning of modal dialog </span>
+
     <span class="sr-only" aria-hidden="true"> Beginning of modal dialog </span>
  
 +
    <button type="button" id="closeDialog2" onclick="closeDialog1();" aria-describedby="dialog1Title">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>
  
Line 168: Line 177:
 
     <button type="button" id="closeDialog1" onclick="closeDialog1();">Close<span class="sr-only"> modal dialog </span></button>
 
     <button type="button" id="closeDialog1" onclick="closeDialog1();">Close<span class="sr-only"> modal dialog </span></button>
  
−
     <!-- Mark the end of the dialog for browsers/AT which don't support ARIA.
+
     <!-- Mark the end of the dialog
−
         NOTE: If the Javascript doesn't apply "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,
−
               the aria-hidden MUST be removed from the following line.
+
               the following line SHOULD add the attribute aria-hidden="true" (or may be  
 +
              removed completely, unless browser/AT combinations which don't support
 +
              ARIA must be supported)
 
     -->
 
     -->
−
     <span aria-hidden="true" class="sr-only"> End of modal dialog </span>
+
     <span class="sr-only" aria-hidden="true"> End of modal dialog </span>
 
   </div>
 
   </div>
  
−
   <div tabindex="-1" id="modalShadingOverlay"></div>
+
   <div tabindex="-1" id="modalShadingOverlay" class="modal-shading-overlay"></div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 04:50, 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.


...

...

Retrieved from "https://labs.levelaccess.com/index.php?title=Modal_dialog_with_ARIA&oldid=5322"