-
Notifications
You must be signed in to change notification settings - Fork 33
Expand file tree
/
Copy pathindex.html
More file actions
274 lines (244 loc) · 11.3 KB
/
index.html
File metadata and controls
274 lines (244 loc) · 11.3 KB
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>
Switch Component: Toggle Button
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script>
// remove no-js and add 'js' to the HTML
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
<link rel="stylesheet" href="../assets/css/--demo-only--.css">
<link rel="stylesheet" href="../assets/css/--shared--.css">
<link rel="stylesheet" href="../assets/css/switch--toggle-button.css">
</head>
<body>
<div class="demo-wrap">
<header class="demo-wrap__header">
<p class="demo-wrap__header__title">
Accessible Styled Form Controls
</p>
<nav>
<a href="https://github.com/scottaohara/a11y_styled_form_controls">See source on GitHub</a>,
<a href="/a11y_styled_form_controls">Index of styled form controls</a>
</nav>
</header>
<main aria-label="content">
<article class="demo">
<header>
<h1>Switch Component: Toggle Button</h1>
<p>Published: <time>July 24, 2018</time></p>
<p>Last updated: <time>December 17, 2018</time></p>
<p>
Pattern to create a toggle <code>button</code>,
visually styled to resemble a <code>switch</code> component.
</p>
</header>
<h2>
Pattern Demo
</h2>
<a data-switch-toggle hidden>
ARIA
<b data-switch-toggle-ui></b>
</a>
<button type="button" data-switch-toggle data-switch-toggle-pressed data-switch-toggle-labels disabled>
Native
</button>
<details style="margin-top: 1em;">
<summary>Visual design note</summary>
<div>
<p>
Switch toggle buttons are commonly represented as a visual text label and a switch UI, or as a text label with a switch UI that has its own "On" and "Off" labeling.
</p>
<p>
By default, the component outputs the unlabeled switch UI. Using the attribute <code>data-switch-toggle-labels</code> or manually adding a class of <code>toggle-switch--labels</code>, the component will add "on" and "off" labels to the switch UI.
</p>
</div>
</details>
<section class="demo-details">
<h3>
Pattern Details
</h3>
<details open>
<summary>Pattern Markup</summary>
<pre><code class="language-html"><a data-switch-toggle>
Progressively Enhanced Toggle
</a>
<button type="button"
data-switch-toggle
data-switch-toggle-labels
data-switch-toggle-pressed
disabled>
Native Button Toggle
</button>
<!-- Markup after JS runs -->
<!-- toggle-switch--labels is the class added to the second example -->
<button type="button"
class="toggle-switch toggle-switch--labels"
aria-pressed="true/false">
button text (label) here
<span aria-hidden="true" class="toggle-switch__ui"></span>
</button></code></pre>
</details>
<p>
The baseline markup for this component is simply a <code>button</code> or an element that can be progressively enhanced into a <code>role=button</code>. The different <code>data-</code> attributes fire off different hooks in the setup script. Ideally a toggle button would be hidden or disabled by default, and then revealed or enabled when the script runs. Doing so would ensure users without JavaScript wouldn't be able to interact with toggle buttons that didn't do anything.
</p>
<h4>The JavaScript</h4>
<p>
Largely the JavaScript for this component is in place to modify the state of the toggle button, when a user engages with it. Any additional functionality for a "switch toggle button" would be custom and unique to the interface it was used within, and thus needs to be added by the developer implementing the component.
</p>
<p>
During the setup process for a toggle button, the JavaScript will progressively enhance a <code>button</code> (or a non-<code>button</code> element) into a toggle button.
</p>
<p>
The necessary attributes will be added to the element, and a child element to serve as the switch UI will be created, if such an element does not already exist and is identified by having the <code>data-switch-toggle-ui</code> attribute.
</p>
<h4>Affects on Screen Reader Announcements?</h4>
<p>
When a <code>button</code> or <code>role="button"</code> has an <code>aria-pressed</code> attribute, it will be announced by screen readers as a "toggle button". While not the same as announcing "Switch", the general concept of these two components is similar, and the <code>aria-pressed</code> attribute has far better support across all browsers and screen readers.
</p>
<p>
Along with the shift in announcement from <q>button</q> to <q>toggle button</q>, screen readers will also announce the current state of the element. The following definition list details the announcements for each screen reader and browser pairing:
</p>
<dl>
<dt>JAWS 18 / 2018 + Internet Explorer 11</dt>
<dd>
<p>
When not selected, the toggle button is announced as:
</p>
<p>
<q>[Accessible Name] toggle button</q>
</p>
<p>
If activated, the word "pressed" is announced after "toggle button".
</p>
<p>
<b>JAWS 18:</b> when actively toggling the button, JAWS will only announce the name of the key that was pressed (space or enter).
</p>
<p>
<b>JAWS 2018:</b> when toggling the button for the first time, JAWS will announce: <q>[Key used to toggle button] [Pressed or Not Pressed], [Accessible Name]</q>. Subsequent toggles will drop the announcement of the accessible name.
</p>
</dd>
<dt>JAWS 18 + Firefox ESR, JAWS 2018 + Firefox ESR + 63 (nightly)</dt>
<dd>
<p>
When not selected, the toggle button is announced as:
</p>
<p>
<q>[Accessible Name] toggle button</q>.
</p>
<p>
If activated, the word "pressed" is announced after "toggle button". When actively toggling the button, JAWS will announce the name of the key that was pressed (space or enter), "toggle button pressed/not pressed" and then the accessible name of the toggle button.
</p>
<p>
Note: for the second example, where "on" and "off" are part of the switch UI, JAWS 18 & 2018 + FireFox ESR will announce this CSS content as part of the accessible name of the toggle button, even though "on" and "off" are contained within a <code>span aria-hidden="true"</code>. JAWS 2018 + FireFox 63 (nightly) correctly do not announce the <code>aria-hidden</code> content.
</p>
</dd>
<dt>JAWS 18 / 2018 + Chrome (latest)</dt>
<dd>
<p>
When not selected, the toggle button is announced as:
</p>
<p>
<q>[Accessible Name] toggle button</q>.
</p>
<p>
If activated, the word "pressed" is announced after "toggle button". When actively toggling the button, JAWS will announce the name of the key that was pressed (space or enter), "toggle button pressed/not pressed" and then the accessible name of the toggle button.
</p>
</dd>
<dt>NVDA 2018.2.1 + Firefox ESR + 63 (nightly) and Chrome (latest)</dt>
<dd>
<p>
When not selected, the toggle button is announced as:
</p>
<p>
<q>[Accessible name] toggle button, not pressed.</q>
</p>
<p>
If activated, it will instead announce as "pressed".
When actively toggling the button, NVDA will announce "pressed" or "not pressed" to match the updated state of the toggle button.
</p>
</dd>
<dt>VoiceOver + Safari 11.1.1 on macOS High Sierra</dt>
<dd>
<p>
When not selected, the toggle button is announced as:
</p>
<p>
<q>[Accessible Name], toggle button. To select or deselect this checkbox, press control-option-space.</q>
</p>
<p>
If activated, the word "selected" will be announced prior to the accessible name of the toggle button. When actively toggling the button, VoiceOver will announce "selected" or "deselected" prior to "toggle button".
</p>
<p>
Note: the announcement of "checkbox" by VoiceOver is odd.
</p>
</dd>
<dt>VoiceOver + Safari on iOS 11.3 to 12.0</dt>
<dd>
<p>
When not selected, the toggle button is announced as:
</p>
<p>
<q>[Accessible Name], toggle button. Not Pressed. Double tap to toggle setting.</q>
</p>
<p>
If activated, the word "Pressed" will be announced instead of "Not Pressed". When actively toggling the button, VoiceOver will make a clicking sound effect when the state changes, and announce "checked" when <code>aria-pressed="true"</code>. Beyond the sound effect, VoiceOver will make no announcement when the toggle button is set to <code>aria-pressed="false"</code>.
</p>
</dd>
<dt>TalkBack (Android Accessibility Suite 6.2) + Android Chrome</dt>
<dd>
<p>
When not selected, the toggle button is announced as:
</p>
<p>
<q>[Accessible Name], not checked, toggle button. Double-tap to toggle.</q>
</p>
<p>
If activated, "not checked" will be replaced with "checked". When actively toggling the button, TalkBack will simply announce "on" or "off" correlating to the current state.
</p>
</dd>
</dl>
<h4>Usage note:</h4>
<p>
Using a "switch" toggle button vs a <a href="../checkbox--switch">"switch" checkbox</a>, or even a <a href="../radio--switch">switch made of radio buttons</a> will depend on the context of which the component is used, and if toggle button vs checkbox or radio announcements would be more appropriate.
</p>
<p>
Ideally a <code>button</code> or <code>input type="checkbox"</code> with a <code>role="switch"</code> would be used when creating a "switch" component. But until all popular browsers and assistive technologies correctly interpret <code>role="switch"</code>, it would be best to rely on the consistent behavior (regardless of varied announcements) of toggle buttons.
</p>
</section> <!-- /.demo-details -->
</article>
<h3>Continue reading</h3>
<p>
For additional information about appropriate usage of switch controls I suggest reviewing
<a href="https://www.smashingmagazine.com/2017/09/building-inclusive-toggle-buttons/">Building Inclusive Toggle Buttons, by Heydon Pickering</a>.
</p>
</main>
</div> <!-- /.demo-wrap -->
<script src="../assets/js/switch-toggle-buttons.js"></script>
<script>
// some other file.js
var selector = '[data-switch-toggle]';
var elList = document.querySelectorAll(selector);
var i;
for ( i = 0; i < elList.length; i++ ) {
var a11ybtn = new A11yToggleButton();
a11ybtn.init( elList[i] );
};
</script>
<script>
var highlighterCSS = function () {
var head = document.head;
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '../assets/vendor/prism.css';
head.appendChild(link);
}
highlighterCSS();
</script>
<script src="../assets/vendor/prism.js"></script>
</body>
</html>