forked from gdkraus/accessible-modal-dialog
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (116 loc) · 9.06 KB
/
index.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>The Incredible Accessible Modal Window, Version 3</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="modal-window.js"></script>
<link media="all" rel="stylesheet" href="modal-window.css" />
</head>
<body>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-40224544-1', 'ncsu.edu');
ga('send', 'pageview');
</script>
<div id="mainPage" aria-hidden="false">
<h1>The Incredible Accessible Modal Window, Version 3</h1>
<p><a href="#">Read the blog post about the updates to this demonstration.</a></p>
<p><a href="https://github.com/gdkraus/accessible-modal-dialog">Get the code on GitHub</a></p>
<p>This page demonstrates how to make a modal window as accessible as possible to assistive technology users. Modal windows are especially problematic for screen reader users. Often times the user is able to "escape" the window and interact with other parts of the page when they should not be able to. This is partially due to the way screen reader software interacts with the Web browser.</p>
<h2>What's New In Version 2?</h2>
<p>Version 3 builds on <a href="http://accessibility.oit.ncsu.edu/training/aria/modal-window/version-2/">Version 2</a>. It is a relatively minor update.</p>
<ul>
<li>The role="document" is removed because NVDA now allows you to browse modal windows.</li>
<li>The close button is really a button now instead of a link, which it should have been a long time ago.</li>
</ul>
<h2>The Accessible Modal Window in Action</h2>
<p>To see this in action, you just need to <button id="startModal">view the modal window</button>. If the modal window works as planned, once the modal window is visible you should not be able to interact with other links on the main page like <a href="http://accessibility.ncsu.edu">going to our main accessibility page</a>. If you can interact with the page behind the modal window, guidance is given for how to get back to the modal window.</p>
<h2>Features</h2>
<p>This example implements the following features:</p>
<ol>
<li>The page is divided into three sections:
<ol>
<li><div id="mainPage></div></li>
<li><div id="modal" role="dialog"></div></li>
<li><div id="modalOverlay"></div></li>
</ol>
</li>
<li>When the modal dialog is displayed, an overlay is placed over top of the mainPage so it is
<ol>
<li>visually grayed out in order to indicate you cannot interact with what is behind the window</li>
<li>not clickable with the mouse</li>
</ol>
</li>
<li>When the modal dialog is displayed, the mainPage is marked with aria-hidden="true" to prevent screen readers from interacting with it once the modal dialog is open</li>
<li>Keyboard access is limited to only interacting with the modal dialog once it is visible
<ol>
<li>The tab key loops through all of the keyboard focusable items within the modal window</li>
<li>This is determined programmatically through the DOM each time the tab key is pressed so you do not have to create an explicit list of focusable items within the modal window to keep track of</li>
<li>The escape key is mapped to the function to close the modal window</li>
<li>The enter key is mapped to the submit function of the modal window</li>
</ol>
</li>
<li>The title of the modal dialog is identified through the aria-labelledby attribute.</li>
<li>The beginning of the modal dialog is marked with an h1</li>
<li>There are offscreen instructions that describe the modal dialog and how to interact with it
<ol>
<li>The instructions are attached through the aria-describedby attribute.</li>
<li>In a previous version of this demonstration, the description was attached through the aria-labelledby attribute. It is more semantically correct to put the description/overview of the window in the aria-describedby attribute.</li>
<li>JAWS, NVDA, and ChromeVox announce both the aria-labelledby and aria-describedby attributes when the modal dialog opens.</li>
<li>VoiceOver only announces the aria-labelledby attribute, but users can still read the instructions via the virtual cursor.</li>
<li>Orca does not announce either the aria-labelledby or aria-describedby attributes, but users can still read the title and instructions via the virtual cursor.</li>
</ol>
</li>
<li>Note, there used to be a role="document" which wrapped all of the contents of the modal window. This was only necessary because NVDA previously did not allow you to fully browse all of the contents of the modal window. NVDA now allows full browsing of the contents so this is not needed anymore.
</li>
<li>Note, there used to be a shim in place to handle a support problem in VoiceOver. In OS X 10.9 this bug has been fixed and the shim is no longer needed.</li>
<li>Configurations Tested
<ul>
<li>JAWS 16.0.1925 in IE 11.0.9600.17501 in Windows 7, Service Pack 1: <strong>Passed - although aria-describedby is not read automatically</strong></li>
<li>NVDA 2014.4 in Firefox 35.0.1 in Windows 7, Service Pack 1: <strong>Passed</strong></li>
<li>Window Eyes 9.0.0.0 in IE 11.0.9600.17501 in Windows 7, Service Pack 1: <strong>Passed - although the title of the modal window and the aria-describedby is not read automatically</strong></li>
<li>VoiceOver in Safari 8.02 (9537.71) in OS X 10.10.1: <strong>Passed - although aria-describedby is not read automatically</strong></li>
<li>ChromeVox 41.0.2269.0 in Chrome 40.0.2214.111 in OS X 10.10.1: <strong>Partial functionality. If the modal window is opened using the CV Key and space, the focus is not shifted to the modal window and it stays in the parent window where you can still interact with it. If the user simply presses space, the focus behaves correctly.</strong></li>
<li>Orca 3.10.3 in Firefox 35.0.1 in Ubuntu 14.04: <strong>Partial Functionality - does not support aria-hidden and does not announce the title of the window</strong></li>
</ul>
</li>
</ol>
</div>
<div id="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog">
<div id="modalDescription" class="screen-reader-offscreen">Beginning of dialog window. It begins with a heading 1 called "Registration Form". Escape will cancel and close the window. This form does not collect any actual information.</div>
<h1 id="modalTitle">Registration Form</h1>
<p>These are the onscreen instructions that are not attached explicitly to a focusable element. Can screen reader users read this text with the virtual cursor?</p>
<form name="form1" onSubmit="return false;">
<p>
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName">
</p>
<p>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName">
</p>
<p>
<label for="email">Email Address</label>
<input type="text" name="email" id="email">
</p>
<p>
<input type="button" name="button" id="enter" value="Submit">
<input type="button" name="cancelButton" id="cancelButton" value="Cancel">
</p>
<button id="modalCloseButton" class="modalCloseButton" title="Close registration form"><img id="cancel" src="x.png" alt="close the registration form"></button>
</form>
</div>
<div id="modalOverlay" tabindex="-1"></div>
</body>
</html>