Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
Line 4: Line 4:
 
   <style type="text/css">
 
   <style type="text/css">
 
     .sr-only {
 
     .sr-only {
 +
position: absolute;
 +
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
 +
clip: rect(1px, 1px, 1px, 1px);
 +
clip-path: inset(50%);
 +
padding: 0;
 +
border: 0;
 +
height: 1px;
 +
width: 1px;
 +
overflow: hidden;
 +
white-space: nowrap;
 
     }
 
     }
  
Line 67: Line 77:
 
   </div>
 
   </div>
  
−
   <div role="dialog" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" class="dialog-hidden">
+
   <div role="dialog" tabindex="-1" id="dialog1" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" class="dialog-hide">
 
     <!-- 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 -->
 
     <span aria-hidden="true" class="sr-only"> Beginning of modal dialog </span>
 
     <span aria-hidden="true" class="sr-only"> Beginning of modal dialog </span>

Revision as of 18:56, 17 November 2016

Example

...
...

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