Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
m
(Remove aria-hidden on the sr-only text to mark the start and end of the modal dialog)
Line 131: Line 131:
  
 
   <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>
     <!-- Mark the beginning of the dialog for browsers/AT which don't support ARIA.
+
     <!-- Mark the beginning 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"> Beginning of modal dialog </span>
+
     <span class="sr-only"> Beginning of modal dialog </span>
  
 
     <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 170:
 
     <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"> End of modal dialog </span>
 
   </div>
 
   </div>
  

Revision as of 00:34, 23 November 2016

Example

Note - not implemented:

  • Constraining keyboard focus within the modal dialog


...

...