Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
(Undo revision 3242 by Owen Edwards (talk))
(Add aria-describedby on the close modal dialog button)
 
(6 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 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("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";
 
         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").style.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> -->
 +
  <!-- <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 137: Line 143:
 
               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>
  
 +
    <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 176: Line 183:
 
               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>
  

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"