-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathdialog.html
61 lines (61 loc) · 3.76 KB
/
dialog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accessible Dialog Boxes</title>
<link rel="stylesheet" href="css/normalization.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/dialog.css" />
</head>
<body>
<div class="container">
<div class="page-wrapper">
<h1>Creating Modal Windows and Interstitials</h1>
<p><a href="http://haltersweb.github.io/Accessibility/">View the library of solutions.</a></p>
<p>A modal window is a web dialog box which appears upon a user action which launches it. An interstitial is a modal-like window which appears on page load.</p>
<p><button type="button" class="btn" data-controls="modal" aria-controls="myModalWindow">Launch modal window example</button></p>
<h2>Managing Focus</h2>
<h3>Modal Windows</h3>
<p>Focus should go to the first actionable element when the modal is opened. This should be the close modal button.</p>
<h3>Interstitials</h3>
<p>Focus should go to the dialog box itself. This will cause the screen reader to read the entire intersitial content.</p>
<h3>Upon closing the dialog box</h3>
<p>If the box is a modal, focus should go to the triggering mechanism if it still exists. Otherwise it should go to the <body>.</p>
<p>If the box is an interstitial, focus should go to the <body>.</p>
<h2>The use of role="dialog" and role="document"</h2>
<p>The dialog window should have a role="dialog".</p>
<p>When using role="dialog" it is imperative that you place all dialog content within a nested container having a role="document". Otherwise, in some browsers content that doesn't gain focus will not be read.</p>
<h2>Escaping the Dialog Box</h2>
<p>You are mimicking an operating system dialog wherein there is no way to leave the dialog without either:</p>
<ul class="bullet">
<li>engaging the actionable items in the dialog box, or</li>
<li>hitting the ESC key.</li>
</ul>
<p>A web dialog box should mimic this behavior. As long as the user has a way out either by using the close button or by hitting “ESC” the modal is fine. It is acceptable that the user is unable to reach the browser chrome while the modal window is active.</p>
<h3>The Close Button</h3>
<p>Make sure the close button has descriptive screen-reader-text which says something like "close dialog box" (just "close" or "close window" is too confusing).</p>
</div>
<div id="myModalWindow" class="modal" role="dialog" data-widget="modal" aria-hidden="true">
<div role="document">
<div>
<button type="button" class="btn svg close-dialog" data-control="close" aria-label="Close Modal Window">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" focusable="false" role="presentation" class="svg-close">
<circle cx="35" cy="35" r="35"/>
<path fill="#FFFFFF" d="M43.7,54.9L39,47.7c-1.9-2.8-3.1-4.8-4.5-7.2h-0.2c-1.1,2.3-2.3,4.4-3.9,7.2l-4.1,7.2H13l14.7-20.2 L13.5,15.1h13.2l4.5,7.3c1.6,2.5,2.6,4.4,3.9,6.7h0.2c1.2-2.5,2.2-4.4,3.4-6.7l4.4-7.3h13.2L41.8,34.5L57,54.9H43.7z"/>
</svg>
</button>
</div>
<h2>Welcome to the Modal Window</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam deleniti maiores minus, suscipit sunt fuga, eius aperiam labore ratione eaque rerum in impedit est, nulla accusantium quasi. Nihil, rerum!</p>
<p><a href="#">Fake link</a></p>
</div>
</div>
<div class="block-screen"></div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/namespacing.js"></script>
<script type="text/javascript" src="js/accessibility-helpers.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
</body>
</html>