This repository has been archived by the owner on Oct 16, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 26
/
Copy pathindex.html
173 lines (159 loc) · 6.74 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8">
<title>
Vanilla Modal Dialogs
</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>
<link rel="stylesheet" href="assets--demo/demo.css">
<link rel="stylesheet" href="assets/css/aria.modal.css">
</head>
<body>
<a href="#main" class="at-only">
Skip to main content
</a>
<header class="content-area">
<h1>
Accessible Modal Dialogs
with <span>Vanilla <abbr title="JavaScript">JS</abbr></span>
</h1>
<div role=note>
This script is no longer maintained.
<p>Please instead read <a href="https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html">Use the dialog element (reasonably)</a>.</p>
</div>
</header>
<main id="main" class="content-area">
<article>
<h2>
ARIA Modal Dialog Demos
</h2>
<p>
The following example, and each of the linked example tests showcase different features of the modal dialog script.
</p>
<p>
For more information about the functionality and options of these examples, see the
<a href="https://github.com/scottaohara/accessible_modal_window#accessible-modal-dialog">modal dialog documentation on GitHub</a>.
</p>
<details>
<summary id="test_id">
Test information
</summary>
<p>
Each dialog (presented here and on linked pages) may have different initial focus placements, for testing purposes. There may be some initially focused items that result in verbose announcements, for demonstrative purposes. Such examples should likely be avoided in production.
</p>
<p>
When each dialog is open, focus (via <kbd>tab</kbd> key or virtual cursor) should <strong>not</strong> be able to reach the document beneath the dialog. Browser chrome controls (browser buttons and address bar, etc.) <strong>should</strong> remain accessible via other means (for example, hitting the <kbd>F6</kbd> key to focus a browser's address bar).
</p>
<p>
Dialogs have been tested with:
</p>
<ul>
<li>
JAWS 18 & 2018 with Firefox (ESR 52), Chrome (latest) and Internet Explorer 11.
</li>
<li>
NVDA 2018.1 & 2018.2.1 with Firefox (ESR 52) and Chrome (latest)
</li>
<li>
VoiceOver + macOS High Sierra and iOS 11.4
</li>
<li>
TalkBack + Chrome on Android Oreo
</li>
</ul>
</details>
<section>
<h3>
Basic Modal Dialog Example
</h3>
<p>
<button type="button" class="btn" data-modal-open="modal_1">
Launch Modal
</button>
</p>
<!-- dialog markup -->
<div id="modal_1" data-modal>
<div data-modal-document>
<h2>
Privacy Information
</h2>
<div>
<p>
We heard you like to know about updates to privacy policies.
So you should be pleased to know we've updated our privacy policy.
</p>
<p>
Please contain your excitement.
</p>
</div>
</div>
</div>
<!-- end dialog markup -->
<details>
<summary>
Basic Modal Dialog test details
</summary>
<p>
The button to activate the modal dialog is assigned its own unique ID, when activated the ID of the specific button used will be stored in a <code>var</code>. The ID will be referred to again when the dialog is closed and focus needs to return to the specific element that opened it.
</p>
<p>
A close <code>button</code> is auto-generated from the script, as there are no manually coded close buttons within the dialog.
</p>
<p>
In this example the dialog container is focused by default. This will result in JAWS + Firefox and VoiceOver (on desktop) announcing the accessible name and role of the dialog when its opened.
</p>
<p>
With JAWS and Internet Explorer 11, the accessible name and role of the dialog will be announced, and then the first child element of the dialog, and its role, will be announced.
</p>
<p>
With NVDA and Firefox, NVDA will announce the accessible name of the dialog, but will <b>not announce the dialog role</b>.
</p>
<p>
NVDA + Firefox and JAWS + Firefox will treat the focused dialog as if it was a new document loaded, and begin reading the contents of the dialog in sequential order.
</p>
</details>
</section>
<section>
<h3>Additional Tests</h3>
<ul>
<li>
<a href="tests/focus-element.html">
Aug. 12, 2018: Tests & results for initial focus placement
</a>
</li>
<li>
<a href="tests/general.html">
Various modal dialog configuration tests
</a>
</li>
<li>
<a href="tests/auto-load.html#modal_1">
Auto-loading modal dialogs <small>(boo)</small>
</a>
</li>
</ul>
</section>
</article>
</main>
<footer class="content-area">
Made by <a href="https://twitter.com/scottohara">@scottohara</a> |
<a href="https://www.scottohara.me">scottohara.me</a>
</footer>
<!--
The modal dialog script functions without *requiring* the inert
polyfill script. However, there may be instances where users can
escape dialogs if the script is not used.
-->
<script src="https://cdn.rawgit.com/GoogleChrome/inert-polyfill/v0.1.0/inert-polyfill.min.js"></script>
<!--
if installing via npm, inert polyfill included as a dependency
<script src="../node_modules/inert-polyfill/inert-polyfill.min.js"></script>
-->
<!-- the demo.js script ensures that elements that do not have a -1 tabindex, will receive one and appropriately receive focus for interactions like activating a skip link, in browsers that require this -->
<script src="assets--demo/demo.js"></script>
<!-- <script src="index.js"></script> -->
<script src="assets/js/aria.modal.min.js"></script>
</body>
</html>