Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
Line 46: Line 46:
 
   <script type="text/javascript">
 
   <script type="text/javascript">
 
     function openDialog1() {
 
     function openDialog1() {
 +
      // Note that we don't use aria-hidden on the dialog, since the
 +
      //  dialog is _actually_ hidden or not hidden by CSS
 
       document.getElementById("dialog1").className = "dialog-show";
 
       document.getElementById("dialog1").className = "dialog-show";
  
 
       setTimeout(function(){
 
       setTimeout(function(){
 
         document.getElementById("dialog1").focus();
 
         document.getElementById("dialog1").focus();
 +
        document.getElementById("pageContent").className = "body-dimmed";
 
         document.getElementById("pageContent").setAttribute("aria-hidden", "true");
 
         document.getElementById("pageContent").setAttribute("aria-hidden", "true");
        document.getElementById("pageContent").className = "body-dimmed";
+
       },1); // Was 2 sec timeout for debugging purposes
       },1); // Was 2 sec timeout just for debugging purposes
 
 
     }
 
     }
  
Line 62: Line 64:
 
         document.getElementById("openDialog1").focus();
 
         document.getElementById("openDialog1").focus();
 
         document.getElementById("dialog1").className = "dialog-hide";
 
         document.getElementById("dialog1").className = "dialog-hide";
       },1); // Was 2 sec timeout just for debugging purposes
+
       },1); // Was 2 sec timeout for debugging purposes
 
     }
 
     }
 
   </script>
 
   </script>
Line 91: Line 93:
  
 
   <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">
     <!-- Mark the end 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 -->
 
     <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 100: Line 102:
 
       <p>Trees are great! They convert CO2 into oxygen, so we can breathe!</p>
 
       <p>Trees are great! They convert CO2 into oxygen, so we can breathe!</p>
  
          <h2>Pine tree</h2>
+
      <h2>Pine tree</h2>
          <p>Description of pine trees ...</p>
+
      <p>Description of pine trees ...</p>
  
          <h2>Oak tree</h2>
+
      <h2>Oak tree</h2>
          <p>Description of oak trees ...</p>
+
      <p>Description of oak trees ...</p>
  
          <h2>Redwood tree</h2>
+
      <h2>Redwood tree</h2>
          <p>Description of redwood trees ...</p>
+
      <p>Description of redwood trees ...</p>
  
          <h2>Aspen tree</h2>
+
      <h2>Aspen tree</h2>
          <p>Description of aspen trees ...</p>
+
      <p>Description of aspen trees ...</p>
  
 +
      <hr>
  
       <label for="i1">Was this helpful? </label><input id="i1" type="checkbox" />
+
       <label for="i1">Was this helpful? <input id="i1" type="checkbox" /></label>
  
 
     </div>
 
     </div>

Revision as of 20:08, 17 November 2016

Example

Note - not implemented:

  • Constraining keyboard focus within the modal dialog


...

...