View source for ARIA Dialog Role with modal true

==Notes==
<p>This example provides a popup with a role of dialog with an aria-labelledby and aria-describedby reference.
Focus is not restricted to the dialog in this example.</p>

Don't set focus to role dialog as screen reader virtual cursor is not working right with arrows if focus is set to role dialog.

Warning: aria-modal="true" causes huge problems with iOS 10.x/10.2.  If it is added the dialog title and instructions are not accessible in the reading order.

==Example==
<html>
<head>
  <style type="text/css">
   .show {
     display:block;
     border: solid thin black;
     width:15em;
     text-align:center;
   }
   .hide {
     display:none;
   }
   .title {
     background-color:black;
     color:white;
     margin-top:0em;
     font-weight:bold;
   }
  </style>
  <script type="text/javascript">
     function toggle() {
       document.getElementById("d1").className = "show";
       setTimeout(function(){document.getElementById("i1").focus();},2000);
     }
     function closeDialog() {
       document.getElementById("d1").className = "hide";
     }
  </script>
</head>
<body>
<button onclick="toggle();">Open dialog</button>

<div id="d1" tabindex="-1" class="hide" role="dialog" aria-labelledby="p1" aria-describedby="p2" aria-modal="true">
  <div role="document">
	<p class="title" id="p1">Settings </p>
	<p id="p2">Use these settings to control your account.</p>
	<label for="i1">Do you like Chocolate? <input id="i1" type="checkbox" /></label>
	<div style="margin-top:1em; padding-bottom:.5em;">
	  <button onclick="closeDialog();">Close</button>
	</div>
  </div>
</div>
</body>
</html>
* JAWS 18 hides other content outside no matter what aria-modal is set to.
[[Category:ARIA]]