-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
1765 lines (1400 loc) · 67.5 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
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>WAI-ARIA - an introduction to Accessible Rich Internet Applications / Patrick H. Lauke</title>
<meta charset="utf-8">
<meta name="viewport" content="width=792, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="shower/themes/redux/styles/screen.css">
<link rel="stylesheet" href="shower/themes/redux/styles/overrides.css">
<link rel="stylesheet" href="highlight/styles/sunburst.css">
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body class="list">
<header class="caption">
<h1>WAI-ARIA</h1>
<p>An introduction to Accessible Rich Internet Applications</p>
</header>
<!-- -->
<section class="slide cover title" id="Cover"><div>
<div class="titlestrap">
<h2>WAI-ARIA</h2>
<p>An introduction to <strong>Accessible Rich Internet Applications</strong></p>
</div>
<p class="info">Patrick H. Lauke</p>
<img src="pictures/background-cover.jpg" alt="" class="cover">
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>what is <strong>ARIA</strong><br>and why do we <strong>need it</strong>?</p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>the problem</h3>
<p>it's <strong>"easy"</strong> (in most cases) to make <strong>static web content</strong> accessible, but nowadays the web strives to be an application platform</p>
<p>complex <strong>web applications</strong> require structures (e.g. interactive controls) that go beyond what regular HTML offers (though some of this introduced with HTML5 ... more on that later)</p>
<!-- [TODO] note that we assume here that devs have a good working knowledge of accessibility 101 / WCAG -->
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/jqueryui.png" alt="">
<p><a target=_blank href="https://jqueryui.com">jQuery UI</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/webcomponents.png" alt="">
<p><a target=_blank href="https://www.webcomponents.org/">webcomponents.org</a></p>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>the problem</h3>
<p>when building interactive controls, some (too many) web developers go "all out" on the JavaScript/CSS, but <strong>ignore/sidestep regular HTML controls completely</strong> (where native HTML equivalents are available) and <strong>ignore how these controls are exposed to assistive technologies</strong></p>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>accessibility is a broad subject</h3>
<ul>
<li>the general concept of accessibility covers a large spectrum of disabilities / user needs</li>
<li>accessibility does not just mean "blind users with screen readers"</li>
<li>sighted keyboard users, users with colour blindness / deficiencies, deaf / hard of hearing users, users with cognitive disabilities...</li>
<li>however, ARIA is (almost) exclusively about how to ensure that web content is correctly conveyed to assistive technologies (screen readers, screen magnifiers with screen reading capability, etc)</li>
</ul>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>github.com/patrickhlauke/aria</p>
</div>
</div></section>
<!-- -->
<section class="slide cover impact"><div>
<div><p>code examples here are simplified<br><small>(but will hopefully convey the right concepts)</small></p></div>
<img src="pictures/background-danger-415-volts.jpg" class="cover" alt="Warning sign with lightning bolt and text: Danger 415 volts">
</div></section>
<!-- -->
<section class="slide code"><div>
<div>
<img src="pictures/faked-button.png" alt="">
<pre><code><div onclick="...">Test</div></code></pre>
<p><small><a target=_blank href="../demos/button/index.html">faked button</a></small></p>
<p>for a sighted mouse / touchscreen user this is a button...<br>but what about <strong>keyboard users?</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide code"><div>
<div>
<img src="pictures/faked-button.png" alt="">
<pre><code><div <mark>tabindex="0"</mark> onclick="...">Test</div></code></pre>
<p><small><a target=_blank href="../demos/button/index-keyboard-focus.html">faked button with focus</a></small></p>
<p>now we can at least focus it...<strong>but can we activate it?</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide code"><div>
<div>
<img src="pictures/faked-button.png" alt="">
<pre><code><div tabindex="0" <mark>onkeyup="..."</mark> onclick="...">Test</div></code></pre>
<p><small><a target=_blank href="../demos/button/index-keyboard-focus-handler.html">faked button with focus and keyboard handling</a></small></p>
<p>for a sighted mouse / touchscreen / keyboard user this is a button...<br>but what about <strong>assistive technology users?</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide code"><div>
<div>
<img src="pictures/faked-button.png" alt="">
<p>compare <code><div></code> to a real <code><button></code></p>
<p><small><a target=_blank href="../demos/button/index-keyboard-focus-handler.html">faked button</a> versus <a target=_blank href="../demos/button/index-real-button.html">real <code><button></code></a></small></p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p><strong>"test"</strong><br>versus<br><strong>"test button – to activate press <kbd>SPACE</kbd> bar"</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>the problem</h3>
<p>generic/inappropriate HTML elements, with extra JavaScript/CSS on top...but they're still recognised and exposed as <code><span></code>, <code><div></code>, etc</p>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>the interplay of browser and assistive technology</p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/accessibilityAPI.png" alt="Diagram: when focused on an element, such as a button, the browser exposes information (name, value, role, state, description) to the OS accessibility API, which in turn is accessed by assistive technologies like JAWS">
<p>Operating systems provide interfaces that expose information about objects and events to assistive technologies<br>
(e.g. Microsoft Active Accessibility [MSAA], the Mac OS X Accessibility Protocol [AXAPI], IAccessible2 [IA2])</p>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>Accessibility Tree</h3>
<p>separate from the DOM, browsers build a matching "accessibility tree":</p>
<ul>
<li>representation of the page/document using platform's accessibility API conventions</li>
<li>kept in sync with the DOM (changes to DOM also trigger changes in the accessibility tree)</li>
<li>this is what the browser exposes to the system's accessibility API and what (modern) assistive technologies interact with</li>
</ul>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/dom-and-accessibility-tree.png" alt="Comparison of a typical DOM structure and the matching accessibility tree structure">
<p>a typical DOM (as shown in a browser's developer tools, which simplifies some aspects like text nodes) and the matching accessibility tree</p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/marcozehe-accessibility-apis.png" alt="">
<p><a target=_blank href="https://www.marcozehe.de/2013/09/07/why-accessibility-apis-matter/">Marco Zehe: Why accessibility APIs matter</a></p>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<h2><strong>assistive</strong> technologies</h2>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>assistive technologies</h3>
<ul>
<li>NVDA (free)</li>
<li>Narrator (free)</li>
<li>JAWS</li>
<li>ZoomText</li>
<li>Dragon NaturallySpeaking</li>
<li>VoiceOver (free)</li>
<li>TalkBack (free)</li>
<li>...</li>
</ul>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<h2><strong>inspection</strong> tools</h2>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>inspection tools</h3>
<p>test using assistive technologies (e.g. screenreaders), however...</p>
<p>assistive technologies often use heuristics to repair incomplete/broken accessibility API information - so we want to check what's actually exposed to the OS/platform.</p>
<p>of course, browsers also have bugs/incomplete support...</p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/firefox-accessibility-inspector.png" alt="Firefox Accessibility Inspector panel in Firefox Developer Tools, showing the accessibility tree and accessibility properties - exposed by Firefox to the platform/OS accessibility API - of an element in a page">
<p><a target=_blank href="https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector">Firefox Accessibility Inspector</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/chrome-devtools-accessibility-panel.png" alt="Chrome DevTools' accessibility panel, showing the accessibility tree and accessibility properties - exposed by Chrome to the platform/OS accessibility API - of an element in a page">
<p><a target=_blank href="https://developer.chrome.com/docs/devtools/accessibility/reference/#pane">Chrome DevTools Accessibility pane</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/chrome-devtools-accessibility-tree.png" alt="Chrome DevTools' full accessibility tree, showing the accessibility tree and accessibility properties - exposed by Chrome to the platform/OS accessibility API - of an element in a page">
<p><a target=_blank href="https://developer.chrome.com/docs/devtools/accessibility/reference/#explore-tree">Chrome DevTools (Preview) Explore the full-page accessibility tree</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/safari-web-inspector-accessibility-panel.png" alt="Safari's Web Inspector, showing a separate 'Accessibility' section under its 'Node' inspection sidebar, listing basic information such as the current node's computed role">
<p><a target=_blank href="https://webkit.org/web-inspector/elements-tab/">Web Inspector Elements tab</a></p>
</div></section>
<!-- -->
<section class="slide code"><div>
<div>
<img src="pictures/faked-button.png" alt="">
<p>compare <code><div></code> to a real <code><button></code></p>
<p><small><a target=_blank href="../demos/button/index-keyboard-focus-handler.html">faked button</a> versus <a target=_blank href="../demos/button/index-real-button.html">real <code><button></code></a></small></p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/chrome-devtools-button-faked.png" alt="Chrome Developer Tools' accessibility panel, showing that the faked button is exposed as a simple 'div'">
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/chrome-devtools-button-real.png" alt="Chrome Developer Tools' accessibility panel, showing that a real button element is exposed with a role of 'button'">
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>if you use custom (not standard HTML) widgets,<br>use <strong>ARIA</strong> to ensure correct info is exposed</p>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<h2>what is <strong>ARIA</strong>?</h2>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/w3c-aria.png" alt="">
<p><a target=_blank href="https://www.w3.org/TR/wai-aria/">W3C - Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>ARIA defines HTML attributes to convey correct role, state, properties and value</p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/diagram-aria.png" alt="Diagram: ARIA defines 'role' and 'aria-*' attributes">
<p>at a high level, ARIA defines various <code>role</code> and <code>aria-*</code> attributes that can be added to your markup</p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/aria-rdf-model.png" alt="Diagram: the complete (and complex) ARIA RDF model">
<p><a target=_blank href="https://www.w3.org/TR/wai-aria/#roles_categorization">W3C - WAI-ARIA 1.1 - 5.3 Categorization of Roles</a></p>
<p>the whole model is vast and complex...and thankfully you don't need to remember this</p>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>Roles are categorized as follows:</h3>
<ul>
<li><strong>Abstract Roles:</strong> never used in markup directly - they serve only for the categorization/definitions</li>
<li><strong>Widget Roles:</strong> interactive controls - simple or composite (made up of various components)</li>
<li><strong>Document Structure Roles:</strong> define what content/structures represent (e.g. headings, lists, groups)</li>
<li><strong>Landmark Roles:</strong> identify key parts of a document/page</li>
<li><strong>Live Region Roles:</strong> special areas of the page whose content is dynamically updated and should be announced by AT</li>
<li><strong>Window Roles:</strong> content that acts as a separate window (dialogs)</li>
</ul>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/aria1.1-button-definition.png" alt="Screenshot: the complete definition for the 'button' role in ARIA 1.1, listing - among other things - its 'Supported States and Properties' and 'Inherited States and Properties'">
<p><small>each role has "states and properties" (e.g. <a target=_blank href="https://www.w3.org/TR/wai-aria/#button">ARIA 1.1 definition for <code>button</code></a>)</small><br><small>implicit/inherited or defined via <code>aria-*</code> attributes</small></p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>this is all complex and confusing...</p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/karlgroves-whatisthisthingandwhatdoesitdo.png" alt="Screenshot: video of the presentation by Karl Groves">
<p>as my former colleague Karl Groves succinctly put it,<br>ARIA helps answer the questions:<br>
<a target=_blank href="https://www.youtube.com/watch?v=YLihNhn_MO4" title="YouTube: Karl Groves - What is this thing and what does it do?">what is this thing and what does it do?</a></p>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>what information does ARIA provide?</h3>
<ul>
<li><strong>role:</strong> what type of "thing" is this? (e.g. 'button', 'main content')</li>
<li><strong>state:</strong> what is its situation? (e.g. 'disabled', 'checked', 'expanded')</li>
<li><strong>name:</strong> what is its name/label?</li>
<li><strong>relationship:</strong> is it tied to any other elements in the page somehow?</li>
</ul>
<p>this information is mapped by the browser to the operating system's accessibility API and exposed to assistive technologies.</p>
<p>extra benefit: once AT understands meaning/purpose, it can automatically announce specific hints and prompts<br>(e.g. JAWS "... button - to activate, press <kbd>SPACE</kbd> bar")</p>
</div></section>
<!-- -->
<section class="slide code"><div>
<div>
<img src="pictures/faked-button.png" alt="">
<pre><code><div tabindex="0"
<mark>role="button"</mark> onkeyup="..."
onclick="...">Test</div></code></pre>
<p><small><a target=_blank href="../demos/button/index-keyboard-focus-handler-role.html">faked button with appropriate role</a></small></p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/chrome-devtools-button-faked-aria.png" alt="Chrome Developer Tools' accessibility panel, showing that a faked button using a 'div', but with correct role=button, is exposed the same way as a native HTML 'button' element">
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>use ARIA to:</h3>
<ul>
<li>make custom widgets understandable to assistive technology users</li>
<li>programmatically indicate relationships between elements</li>
<li>notify users of dynamic updates</li>
<li>hide irrelevant visible content from assistive technology</li>
<li>remediation of inaccessible content without completely recoding</li>
</ul>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>ARIA roles and attributes: restrictions</h3>
<ul>
<li>certain <code>role</code>s only make sense as part of a specific complex widget</li>
<li>some <code>aria-*</code> attributes are global</li>
<li>other <code>aria-*</code> attributes only make sense for particular <code>role</code></li>
<li>not all roles/attributes are supported/implemented consistently everywhere</li>
</ul>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>what ARIA <strong>doesn't</strong> do...</h3>
<p>ARIA is <strong>not magic</strong>: it only changes how <strong>assistive technology</strong> interprets content. specifically, <strong>ARIA does not</strong>:</p>
<ul>
<li>make an element focusable</li>
<li>provide appropriate keyboard bindings</li>
<li>change browser behavior</li>
<li>automatically maintain/update properties</li>
<li>change visible appearance</li>
</ul>
<p>all of this is still your responsibility...</p>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h4><strong>no ARIA</strong> is better than <strong>bad ARIA</strong></h4>
<ul>
<li>ARIA roles/attributes are a "promise" to users / assistive technologies (e.g. "this component is actually a button...") – you must ensure that it then behaves correctly</li>
<li>if you're not sure how to represent a particular complex widget or control, don't just throw ARIA roles and attributes at your markup – you're more likely to make things worse / more confusing / non-functional for assistive technology users</li>
</ul>
<p><small><a href="https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/#x2-1-no-aria-is-better-than-bad-aria">W3C - ARIA Authoring Practices Guide (APG)</a></small></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/w3c-aria-authoring-practices.png" alt="">
<p>WAI-ARIA spec can be dry/technical - use for reference<br><a target=_blank href="https://www.w3.org/WAI/ARIA/apg/">W3C - ARIA Authoring Practices Guide (APG)</a> is more digestible.</p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>in principle ARIA can be used in all markup languages<br><small>(depending on <strong>browser support</strong>)</small></p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/tpgi-aria-in-svg.png" alt="">
<p><a target=_blank href="tps://www.tpgi.com/using-aria-enhance-svg-accessibility/">Using ARIA to enhance SVG accessibility</a></p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>...but we'll just focus on<br><strong>ARIA in HTML</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="./pictures/w3c-html-aria.png" alt="">
<p><a target=_blank href="https://www.w3.org/TR/html-aria/">W3C - ARIA in HTML</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="./pictures/w3c-using-aria.png" alt="">
<p><a target=_blank href="https://www.w3.org/TR/using-aria/">W3C - Using ARIA</a></p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h2>the <strong>5 rules</strong> of ARIA use</h2>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h3>1. <strong>don't use</strong> ARIA</h3>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/aria-club.jpg" alt="Fight Club spoof picture, with Steve Faulkner: The first rule of ARIA club is...you don't use ARIA">
</div></section>
<!-- -->
<section class="slide listing"><div>
<blockquote><p>If you can use a native HTML element [<a target=_blank href="https://www.w3.org/TR/html/">HTML5</a>] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.</p></blockquote>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<p>you <strong>can</strong> use a <code><span></code> to behave as, and be exposed just like, a link...</p>
<pre><code>
<span tabindex="0" <mark>role="link"</mark>
onclick="document.location='...'"
<mark>onkeyup="..."</mark>>link</span>
</code></pre>
<p>example: <a target=_blank href="../demos/structure/role-link.html">link</a></p>
<p>...but <strong>why would you?</strong></p>
<p>unless there's a very good reason, just use <code><a href="...">...</a></code></p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h3>2. <strong>don't change</strong> native semantics</h3>
<p><small>unless you really have to / know what you're doing</small></p>
</div>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<p>don't do this:</p>
<pre><code class="html"><h1 role="button">heading button</h1></code></pre>
<p>otherwise the heading is no longer a heading<br>(e.g. AT users can't navigate to it quickly)</p>
<p>you can do this instead:</p>
<pre><code class="html"><h1><span role="button">heading button</span></h1></code></pre>
<p>or, in accordance with the first rule or ARIA:</p>
<pre><code class="html"><h1><button>heading button</button></h1></code></pre>
<p>example: <a target=_blank href="../demos/rules-of-aria/button-heading.html">heading button</a></p>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<p>don't do this:</p>
<pre><code class="html"><ul role="navigation">
<li><a href="...">...</a></li>
...
</ul>
</code></pre>
<p>do this instead:</p>
<pre><code class="html"><div role="navigation">
<ul>
<li><a href="...">...</a></li>
...
</ul>
</div>
</code></pre>
<p>or list is no longer a list (e.g. AT won't say "list with X items...")</p>
<p>example: <a target=_blank href="../demos/rules-of-aria/list-navigation.html">list navigation</a></p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h3>3. make interactive ARIA controls <strong>keyboard accessible</strong></h3>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<p>All interactive widgets must be focusable and scripted to respond to standard key strokes or key stroke combinations where applicable. [...]</p>
<p>Refer to the <a target=_blank href="https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/">keyboard and structural navigation</a> and <a target=_blank href="https://www.w3.org/WAI/ARIA/apg/patterns/">design patterns</a> sections of the <a target=_blank href="https://www.w3.org/WAI/ARIA/apg/">ARIA Authoring Practices Guide</a></p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h3>4. <strong>don't "neutralise"</strong> focusable elements</h3>
</div>
</div></section>
<!-- -->
<section class="slide listing code"><div>
<p>don't use <code>role="presentation"</code> or <code>aria-hidden="true"</code> on a visible focusable element. Otherwise, users will navigate/focus onto "nothing".</p>
<pre><code class="html">
<!-- don't do this... -->
<button role="presentation">press me</button>
<button aria-hidden="true">press me</button>
<span tabindex="0" aria-hidden="true">...</span>
</code></pre>
<p>example: <a target=_blank href="../demos/rules-of-aria/neutralised-elements.html">neutralised elements</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/chrome-devtools-aria-hidden.png" alt="Screenshot of Chrome Developer Tools' accessibility panel, showing how aria-hidden elements, and elements whose ancestor is aria-hidden, are denoted">
<p>Chrome DevTools indicates when a node is hidden<br>(directly, or due to an ancestor being hidden)</p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/firefox-accessibility-inspector-aria-hidden.png" alt="Screenshot of Firefox accessibility inspector - aria-hidden nodes are not shown at all in the accessibility tree representation">
<p><code>aria-hidden</code> removes nodes from the accessibility tree<br>(as seen here in Firefox's accessibility inspector)</p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h3>5. interactive elements <strong>must have an accessible name</strong></h3>
</div>
</div></section>
<!-- -->
<section class="slide listing code"><div>
<pre><code class="html">
<!-- don't do this... -->
<span tabindex="0" role="button">
<span class="glyphicon glyphicon-remove"></span>
</span>
</code></pre>
</div></section>
<!-- -->
<section class="slide listing code"><div>
<pre><code class="html">
<span tabindex="0" role="button">
<span class="glyphicon glyphicon-remove">
<mark><span class="...">Delete</span></mark>
</span>
</span>
<span tabindex="0" role="button" <mark>title="Delete"</mark>>
<span class="glyphicon glyphicon-remove"></span>
</span>
</code></pre>
<p>refer to <a target=_blank href="https://www.w3.org/TR/wai-aria/#namecalculation">WAI-ARIA 1.1 - 5.2.7. Accessible Name Calculation</a></p>
</div></section>
<!-- -->
<section class="slide listing code"><div>
<pre><code class="html">
<span tabindex="0" role="button" <mark>aria-label="Delete"</mark>>
<span class="glyphicon glyphicon-remove"></span>
</span>
<span tabindex="0" role="button" <mark>aria-labelledby="..."</mark>>
<span class="glyphicon glyphicon-remove"></span>
</span>
...
<span id="<mark>...</mark>" class="...">Delete</span>
</code></pre>
<p>refer to <a target=_blank href="https://www.w3.org/TR/wai-aria/#namecalculation">WAI-ARIA 1.1 - 5.2.7. Accessible Name Calculation</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/chrome-devtools-accessibility-panel-accessible-name.png" alt="Screenshot of Chrome Developer Tools' accessibility panel, showing details about which attributes - content, title, aria-label, aria-labelledby - contribute to the element's name">
<p>Chrome DevTools' accessibility panel can help understand which attributes contribute to an element's name</p>
<p>example: <a target=_blank href="../demos/accessible-name-calculation/">accessible name calculation</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/tpgi-short-note-on-aria-label.png" alt="">
<p>side note: <code>aria-label</code> / <code>aria-labelledby</code> / <code>aria-describedby</code> and arbitrary elements<br><small>(see <a href="https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/">Short note on aria-label, aria-labelledby, and aria-describedby</a>)</small></p>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<h2>ARIA and <strong>HTML5</strong></h2>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h3>ARIA and HTML5</h3>
<ul>
<li>ARIA is used when building things that native HTML can't do</li>
<li>for many years, ARIA was a "bridging technology" to overcome HTML semantic limitations</li>
<li>HTML5 introduced new elements, element types, attributes that solve some of these situations</li>
<li>there are still things that HTML can't express, so ARIA is here to stay...</li>
</ul>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/html5-slider.png" alt="Using Chrome DevTools' accessibility panel we see that a native HTML5 input with type='range' is exposed correctly as a 'slider'">
<p>example: <a target=_blank href="../demos/slider/">HTML5 range input</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/w3c-html-accessibility-api-mappings.png" alt="">
<p><a target=_blank href="https://www.w3.org/TR/html-aam-1.0/">W3C HTML Accessibility API Mappings 1.0</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/w3c-html5-wai-aria.png" alt="">
<p>of course you can (and for many complex widgets, must) still use<br><a target=_blank href="https://www.w3.org/TR/html/dom.html#wai-aria" title="WAI-ARIA section in W3C HTML5 Specification">WAI-ARIA in HTML5</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/w3c-validator-html5-aria.png" alt="W3C Validator result, showing an error for an inappropriately used ARIA role">
<p>side note: you can validate pages with (static) ARIA <a target=_blank href="https://validator.w3.org/">validator.w3.org</a></p>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<h2>common <strong>structures</strong> and <strong>widgets</strong></h2>
<p><small>(not an exhaustive list - enough to understand concepts)</small></p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h3>using ARIA to provide <strong>structure</strong></h3>
</div>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<pre><code>
<p class="1" <mark>role="heading"</mark> <mark>aria-level="1"</mark>>Heading 1</p>
...
<p class="h2" <mark>role="heading"</mark> <mark>aria-level="2"</mark>>Heading 2</p>
...
<p class="h3" <mark>role="heading"</mark> <mark>aria-level="3"</mark>>Heading 3</p>
...
</code></pre>
<p>example: <a target=_blank href="../demos/structure/role-heading.html">headings</a></p>
<ul>
<li>add <code>role="heading"</code></li>
<li>if more than one hierarchical level, and can't be inferred from structure, add explicit <code>aria-level</code></li>
</ul>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<pre><code>
<div <mark>role="list"</mark>>
<div <mark>role="listitem"</mark>>...</div>
<div <mark>role="listitem"</mark>>...</div>
<div <mark>role="listitem"</mark>>...</div>
...
</div>
</code></pre>
<p>example: <a target=_blank href="../demos/structure/role-list.html">list/listitem</a></p>
<ul>
<li>add <code>role="list"</code> and <code>role="listitem"</code></li>
<li>generally more complex (big markup structures that boil down to essentially "a list of things...")</li>
</ul>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<p><code><img></code> is identified as an image by assistive technologies, and you can provide alternative text.</p>
<pre><code>
<img src="..." alt="alternative text">
</code></pre>
<p>if you're using embedded <code><svg></code>, use ARIA to achieve the same:</p>
<pre><code>
<svg <mark>role="img"</mark> <mark>aria-label="alternative text"</mark>> ... </svg>
</code></pre>
<p>example: <a target=_blank href="../demos/image/index.html">embedded SVG image</a></p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h4>removing semantics</h4>
</div>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<p>if your page/app uses inappropriate markup, ARIA can be used to remove semantic meaning. useful for remediation if markup cannot be changed.</p>
<pre><code>
<table <mark>role="presentation"</mark>>
<tr>
<td>Layout column 1</td>
<td>Layout column 2</td>
</tr>
</table></code></pre>
<p>example: <a target=_blank href="../demos/structure/remediation-layout-table.html">layout table remediation</a></p>
<p>ARIA 1.1 introduced <code>role="none"</code> as an alias for <code>role="presentation"</code> – they are equivalent (and older browsers/AT likely better off still using <code>role="presentation"</code>)</p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h4>landmarks</h4>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/blog-structure-before.png" alt="Classic blog structure using div elements with id attributes 'header', 'sidebar', 'content', 'footer' and individual posts marked up with div elements given class name 'post'">
<p>adapted from <a target=_blank href="http://html5doctor.com/designing-a-blog-with-html5/">HTML5 Doctor - Designing a blog with html5</a></p>
<p>example: <a target=_blank href="../demos/landmarks/blog-structure-before.html">blog structure</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/blog-structure-after-aria.png" alt="Classic blog structure using div elements, now complemented with ARIA role attributes 'banner', 'navigation', 'main', 'contentinfo' and individual posts with role of 'article'">
</div></section>
<!-- -->
<section class="slide listing"><div>
<h5>why define landmarks?</h5>
<ul>
<li>users of assistive technologies can more easily find areas of your page/app</li>
<li>AT keyboard controls to navigate to/between landmarks</li>
<li>overview dialogs listing all landmarks (e.g. NVDA)</li>
</ul>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/blog-structure-after-aria-nvda-combined.png" alt="Illustration of how the blog structure with ARIA role attributes is listed in NVDA's Elements List > Landmarks">
<p>example: <a target=_blank href="../demos/landmarks/blog-structure-after-aria.html">blog structure with ARIA</a></p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>doesn't <strong>HTML5</strong> solve this?</p>
</div>
</div></section>
<section class="slide"><div>
<img src="pictures/blog-structure-after-html5.png" alt="Classic blog structure, recoded using HTML5 structural elements: header, nav, main, article, footer">
<p>adapted from <a target=_blank href="http://html5doctor.com/designing-a-blog-with-html5/">HTML5 Doctor - Designing a blog with html5</a></p>
<p>example: <a target=_blank href="../demos/landmarks/blog-structure-after-html5.html">blog structure with HTML5</a></p>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="pictures/blog-structure-after-html5-nvda-combined.png" alt="Illustration of how the blog structure with HTML5 structural elements is listed in NVDA's Elements List > Landmarks">
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h3>using ARIA for<br><strong>simple/standalone widgets</strong></h3>
</div>
</div></section>
<!-- -->
<section class="slide cover impact"><div>
<div><p>my JavaScript sucks...<br><small>(but will hopefully convey the right concepts)</small></p></div>
<img src="pictures/background-danger-415-volts.jpg" class="cover" alt="Warning sign with lightning bolt and text: Danger 415 volts">
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h4>button</h4>
</div>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<pre><code>
<span class="...">Button?</span>
<div class="...">Button?</div>
<a href="#" class="...">Button?</a>
</code></pre>
<p>example: <a target=_blank href="../demos/button/">button</a></p>
<p>while using a link is slightly less evil, as at least it receives keyboard focus by default, it's still not correct: links are meant for <strong>navigation</strong>, not in-page actions or form submissions</p>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<pre><code>
<span <mark>tabindex="0"</mark> class="..." <mark>role="button"</mark>>Button!</span>
<div <mark>tabindex="0"</mark> class="..." <mark>role="button"</mark>>Button!</div>
<a href="#" class="..." <mark>role="button"</mark>>Button!</a>
</code></pre>
<ul>
<li>add <code>role="button"</code></li>
<li>make sure it's focusable</li>
<li>add handling of <kbd>SPACE</kbd> (and in some cases <kbd>ENTER</kbd>)</li>
</ul>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<p>assuming there's a <code>click</code> handler:</p>
<pre><code class="js">
foo.addEventListener('keyup', function(e) {
// Space or Enter key
if (e.key === " " || e.key === "Enter") {
// stop default behavior (usually, scrolling)
e.preventDefault();
// trigger the existing click behavior
this.click();
}
});
</code></pre>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<p>you could even do it "in one go" for all your faked buttons, assuming they have the correct <code>role="button"</code>, with <code>querySelectorAll</code> and attribute selectors:</p>
<pre><code class="js">
var buttons = document.querySelectorAll("[role='button']");
for (var i=0; i<buttons.length; i++) {
buttons[i].addEventListener('keyup', function(e) {
if (e.key === " " || e.key === "Enter") {
e.preventDefault();
this.click();
}
});
}
</code></pre>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<h4>toggle button</h4>
</div>
</div></section>