forked from gdkraus/accessible-modal-dialog
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
49 lines (46 loc) · 3.04 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
<!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>
<div id="mainPage" aria-hidden="false">
<h1>The Incredible Accessible Modal Window, Version 4</h1>
<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>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="https://github.com/">going to the main GitHub 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>
</div>
<div id="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog">
<div role="document">
<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>
<div id="modalOverlay" tabindex="-1"></div>
</body>
</html>