-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
444 lines (378 loc) · 15.7 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
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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
<html>
<head>
<title>Interactive component + voice command test</title>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/@department-of-veterans-affairs/component-library/dist/main.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/@department-of-veterans-affairs/formation/dist/formation.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="module">
import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@department-of-veterans-affairs/web-components/loader/index.js";
defineCustomElements();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/2.1.7/axe.js" ></script>
<!-- uswds -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uswds.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uswds.min.css" rel="stylesheet">
</head>
<body class="vads-u-padding-x--2 vads-u-padding-y--2">
<h1>Interactive elements + voice command test page</h1>
<blockquote><strong>Note:</strong> If you aren't able to see the VADS componenets at the bottom of this page, use <a href="https://c4lrj7.csb.app/">this page</a> to test instead.</blockquote>
<p>This page is a playground to test how voice command tools interact with the accessible names of interactive elements, and how they determine those names.</p>
<p>We're testing two sets of components:</p>
<ul><li>"Standard" components like a and button</li>
<li>VADS components like va-link and va-button</li>
</ul>
<h2>Instructions</h2>
<ol>
<li>Open the <a href="https://docs.google.com/spreadsheets/d/154S4eYogg-k-Lx-GFLZuriIs8Nr3q2LO7gRY3jxamvU/edit?gid=0#gid=0" target="_blank">audit spreadsheet (opens in new tab)</a></li>
<li>Pick one of the following tools:
<ul>
<li>✅ <strong>Brian:</strong> Dragon (latest version)</li>
<li>🛑 <strong>No availability:</strong> Dragon (earlier version)</li>
<li>✅ <strong>Jamie:</strong> Talon</li>
<li>✅ <strong>SK:</strong> Apple Voice Control (iOS)</li>
<li>✅ <strong>Jamie:</strong> Apple Voice Control (MacOS)</li>
<li>✅ <strong>Jamie:</strong> Windows Speech Recognition (Windows 10 and earlier)</li>
<li>✅ <strong>Steve:</strong> Windows Voice Access (Windows 11)</li>
<li>✅ <strong>Brian:</strong> Android Voice Access (unrelated to the Windows feature of the same name)</li>
</ul></li>
<p>
<strong>Note:</strong> Nuance doesn't appear to let you download any
old versions. There are also some old versions of Dragon available via
archive.org, but those likely need a Win 7 PC to run on, which we
don't have access to.
</p>
<li>For each interactive element on the page, using each tool listed above, do the following:
<ol>
<li>Interact via the visible label (i.e., the visible text within the component)</li>
<li>Interact via the accessible name (accName)
<ul><li>elements not using ARIA - the visible label IS the accName</li>
<li>for elements using aria-label, the accName is the aria-label</li>
<li>elements using aria-labelledby have their accName specified</li>
</ul>
</li>
<li>Interact via a combination of visible label and accName, if applicable</li>
<li>Determine if the test is <strong>successful</strong> - you are able to use the visual label to activate the element.</li>
<li>Write down your findings in the audit spreadsheet</li>
</ol></li>
<li>If you've completed testing all interactive elements using a specific tool, label the tool in the list above with a checkmark: ✅</li>
</ol>
<hr aria-hidden="true">
<h2>Standard browser components</h2>
<h3>Links</h3>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="linkNoARIA">No ARIA</h4>
<p>This link doesn't use ARIA.</p>
<p><a href="#linkNoARIA">A standard link</a></p></div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="linkNoARIAdup">No ARIA - duplicate</h4>
<p>How does the tool deal with duplicate links?</p>
<p><a href="#linkNoARIAdup">Another link</a></p>
<p><a href="#linkNoARIAdup">Another link</a></p></div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="linkARIAbegin">aria-label, beginning match</h4>
<p>aria-label="My link to website"</p>
<p><a href="#linkARIAbegin" aria-label="My link to website">My link</a></p>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="linkARIAmiddle">aria-label, match in the middle</h4>
<p>aria-label="The middle"</p>
<p><a href="#linkARIAmiddle" aria-label="The middle">Match in the middle</a></p>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="linkARIAnone">aria-label, no match</h4>
<p>aria-label="Hello"</p>
<p><a href="#linkARIAnone" aria-label="Hello">Goodbye</a></p>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="linkARIAlabelledby">aria-labelledby</h4>
<p><em>This paragraph has an ID of "summer":</em></p>
<p id="summer">Summer</p>
<p><em>This link has an ID of "breeze", is labeled by "summer breeze"; the accName is "Summer Breeze"</em></p>
<p><a href="#linkARIAlabelledby" id="breeze" aria-labelledby="summer breeze">Breeze</a></p>
<p><em>This link has an ID of "breeze2", is labeled by "breeze2 summer"; the accName is "Breeze Summer"</em></p>
<p><a href="#linkARIAlabelledby" id="breeze2" aria-labelledby="breeze2 summer">Breeze</a></p>
</div>
<h3>Buttons</h3>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>No ARIA</h4>
<p>This button doesn't use ARIA.</p>
<button>A standard button</button>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>No ARIA - duplicate</h4>
<p>How does the tool deal with duplicate buttons?</p>
<button>Another button</button>
<button>Another button</button>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>aria-label, beginning match</h4>
<p>aria-label="Join me in my quest"</p>
<button aria-label="Join me in my quest">Join me</button>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>aria-label, match in the middle</h4>
<p>aria-label="Wild eyes"</p>
<button aria-label="Wild eyes">Eyes</button>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>aria-label, no match</h4>
<p>aria-label="Sunrise"</p>
<button aria-label="Sunrise">Evening</button>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>aria-labelledby</h4>
<p><em>This paragraph has an ID of "howdy":</em></p>
<p id="howdy">Howdy</p>
<p><em>This button has an ID of "partner", is labeled by "howdy partner"; the accName is "Howdy Partner"</em></p>
<button id="partner" aria-labelledby="howdy partner">Partner</button>
<p><em>This button has an ID of "partner2", is labeled by "partner2 howdy"; the accName is "Partner Howdy"</em></p>
<button id="partner2" aria-labelledby="partner2 howdy">Partner</button>
</div>
<h3>Form inputs</h3>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Text input, no ARIA</h4>
<label for="myText1">My name</label>
<input type="text" id="myText1">
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Text input, aria-label, beginning match</h4>
<p>aria-label="Your name is"</p>
<label for="myText2">Your name</label>
<input type="text" id="myText2" aria-label="Your name is">
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Text input, aria-label, middle match</h4>
<p>aria-label="My company name"</p>
<label for="myText3">Company</label>
<input type="text" id="myText3" aria-label="My company name">
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Text input, aria-label, no match</h4>
<p>aria-label="My ID"</p>
<label for="myText4">Identification</label>
<input type="text" id="myText4" aria-label="My ID">
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Radio buttons, aria-label, beginning match</h4>
<p>aria-label="yes way" for <em>yes</em> and "no way" for <em>no</em></p>
<fieldset>
<legend>What is your answer?</legend>
<input type="radio" name="yesno" id="yes" aria-label="Yes way">
<label for="yes">Yes</label>
<input type="radio" name="yesno" id="no" aria-label="No way">
<label for="no">No</label>
</fieldset>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Radio buttons, aria-label, middle match</h4>
<p>aria-label="I believe" for <em>believe</em> and "I don't believe" for <em>don't believe</em></p>
<fieldset>
<legend>Do you believe in love after love?</legend>
<input type="radio" name="believe" id="believe" aria-label="I believe">
<label for="believe">Believe</label>
<input type="radio" name="believe" id="dontbelieve" aria-label="I don't believe">
<label for="dontbelieve">Don't believe</label>
</fieldset>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Radio buttons, aria-label, no match</h4>
<p>aria-label="pickles" for <em>cheese</em> and "cucumber" for <em>coffee</em></p>
<fieldset>
<legend>What's your favorite food?</legend>
<input type="radio" name="food" id="cheese" aria-label="pickles">
<label for="cheese">Cheese</label>
<input type="radio" name="food" id="coffee" aria-label="cucumber">
<label for="coffee">Coffee</label>
</fieldset>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Checkbox, aria-label, beginning match</h4>
<p>aria-label="treat"</p>
<input type="checkbox" id="treat" name="scales" aria-label="treat" />
<label for="treat">Treat me</label>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Checkbox, aria-label, middle match match</h4>
<p>aria-label="raise"</p>
<input type="checkbox" id="raise" name="scales" aria-label="raise" />
<label for="raise">Want a raise</label>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Checkbox, aria-label, no match</h4>
<p>aria-label="fur"</p>
<input type="checkbox" id="scales" name="scales" aria-label="Fur" />
<label for="scales">Scales</label>
</div>
<hr aria-hidden="true">
<h2>VADS components</h2>
<h3>Links</h3>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="vadsNoARIA">No ARIA</h4>
<p>This link doesn't use ARIA.</p>
<p>
<va-link
href="#vadsNoARIA"
text="Contact us"
/>
</p>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="vadsNoARIAdup">No ARIA, duplicate</h4>
<p>How does the tool deal with duplicate "va-link" components?</p>
<p>
<va-link
href="#vadsNoARIAdup"
text="Call us"
/>
</p>
<p>
<va-link
href="#vadsNoARIAdup"
text="Call us"
/>
</p>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="vadsARIAbegin">aria-label, beginning match</h4>
<p>aria-label="Records on VA.gov"</p>
<p>
<va-link
href="#vadsARIAbegin"
text="Records"
label="Records on VA.gov"
/>
</p>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="vadsARIAmiddle">aria-label, match in the middle</h4>
<p>aria-label="Check your claims"</p>
<p>
<va-link
href="#vadsARIAmiddle"
text="Claims"
label="Check your claims"
/>
</p>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4 id="vadsARIAno">aria-label, no match</h4>
<p>aria-label="Nighttime"</p>
<p>
<va-link
href="#vadsARIAno"
text="Morning"
label="Nighttime"
/>
</p>
</div>
<p><em>There is no aria-labelledby option</em></p>
<h3>Buttons</h3>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>No ARIA</h4>
<p>This button doesn't use ARIA.</p>
<va-button
onClick={function noRefCheck(){}}
text="Default">
</va-button>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>No ARIA, duplicate</h4>
<p>How does the tool deal with duplicate "va-button" components?</p>
<va-button
onClick={function noRefCheck(){}}
text="Click it!">
</va-button>
<va-button
onClick={function noRefCheck(){}}
text="Click it!">
</va-button>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>aria-label, beginning match</h4>
<p>aria-label="Play a game"</p>
<va-button
label="Play a game"
onClick={function noRefCheck(){}}
text="Play">
</va-button>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>aria-label, match in the middle</h4>
<p>aria-label="Legend of Zelda"</p>
<va-button
label="Legend of Zelda"
onClick={function noRefCheck(){}}
text="Zelda">
</va-button>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>aria-label, no match</h4>
<p>aria-label="Bloodborne"</p>
<va-button
label="Bloodborne"
onClick={function noRefCheck(){}}
text="Dark Souls">
</va-button>
<p><em>There is no aria-labelledby option</em></p>
</div>
<h3>Form inputs</h3>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Text input, no ARIA</h4>
<p>accName is "Input Option"</p>
<va-text-input
hint="Option"
label="Input"
name="my-input"
onBlur={function noRefCheck(){}}
onInput={function noRefCheck(){}}
show-input-error>
</va-text-input>
<p><em>There is no aria-label or aria-labelledby option for text inputs</em></p>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Radio button tile with description text</h4>
<p>The tile's accName is "Carver Option"
</p>
<va-radio
label="Select one historical figure"
>
<va-radio-option
id="soujourner-truth1"
label="Soujourner Truth"
name="group3"
tile
value="1"
/></va-radio-option>
<va-radio-option
description="Option"
id="george-washington-carver1"
label="Carver"
name="group3"
tile
value="2"
/></va-radio-option>
</va-radio>
<p><em>Radio buttons have no aria-label or aria-labelledby options</em></p>
</div>
<div class="vads-u-border--1px vads-u-border-style--dotted vads-u-padding-x--2 vads-u-margin-bottom--2">
<h4>Checkbox tile with description text</h4>
<p>The generated accName is "Truth Option"
<va-checkbox
checkbox-description="Option"
label="Truth"
onBlur={function noRefCheck(){}}
tile
/>
</va-checkbox>
<p><em>Checkboxes have no aria-label or aria-labelledby options</em></p>
</div>
</body>
</html>