Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
(Add use of HTML5 "hidden" for IE compatibility)
Line 50: Line 50:
 
     function openDialog1() {
 
     function openDialog1() {
 
       // Note that we don't use aria-hidden on the dialog, since the
 
       // Note that we don't use aria-hidden on the dialog, since the
       //  dialog is _actually_ hidden by CSS
+
       //  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
 +
      //  doesn't hide "display:none" content from the accessibility tree
 +
      document.getElementById("dialog1").removeAttribute("hidden");
  
 
       setTimeout(function(){
 
       setTimeout(function(){
Line 68: Line 71:
 
         var toFocus = focusStack.pop();
 
         var toFocus = focusStack.pop();
  
         if ( toFocus ) {
+
         try {
          toFocus.focus();
+
          if ( toFocus ) {
        } else {
+
            toFocus.focus();
          try {
+
          } else {
            document.body.focus();
+
              document.body.focus();
          }
 
          catch (e) {
 
 
           }
 
           }
 +
        }
 +
        catch (e) {
 
         }
 
         }
 
         document.getElementById("dialog1").className = "dialog-hide";
 
         document.getElementById("dialog1").className = "dialog-hide";
 +
        // Also need to use the HTML5 "hidden" attribute, because IE
 +
        //  doesn't hide "display:none" content from the accessibility tree
 +
        document.getElementById("dialog1").setAttribute("hidden", "hidden");
 
       },1); // Was 2 sec timeout for debugging purposes
 
       },1); // Was 2 sec timeout for debugging purposes
 
     }
 
     }
Line 106: Line 112:
 
   </div>
 
   </div>
  
   <div role="dialog" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" aria-modal="true" class="dialog-hide">
+
   <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 for browsers/AT which don't support ARIA -->
+
     <!-- Mark the beginning of the dialog for browsers/AT which don't support ARIA.
 +
        NOTE: If the Javascript doesn't apply "aria-hidden" to ALL of the rest of the page content,
 +
              the aria-hidden MUST be removed from the following line.
 +
    -->
 
     <span aria-hidden="true" class="sr-only"> Beginning of modal dialog </span>
 
     <span aria-hidden="true" class="sr-only"> Beginning of modal dialog </span>
  
Line 141: Line 150:
 
     <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 for browsers/AT which don't support ARIA.
 +
        NOTE: If the Javascript doesn't apply "aria-hidden" to ALL of the rest of the page content,
 +
              the aria-hidden MUST be removed from the following line.
 +
    -->
 
     <span aria-hidden="true" class="sr-only"> End of modal dialog </span>
 
     <span aria-hidden="true" class="sr-only"> End of modal dialog </span>
 
   </div>
 
   </div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 20:24, 22 November 2016

Example

Note - not implemented:

  • Constraining keyboard focus within the modal dialog


...

...