forked from karma-dharma/learn-a11y
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1602 lines (1407 loc) · 117 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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Accessible Content Training</title>
<meta name="description" content="The slidedeck for the karmadharma Web Accessibility Lunch and Learn.">
<meta name="author" content="YIKES, Inc.">
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/yikes.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css">
<!-- FontAwesome -->
<script defer src="js/all.min.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- INTRO SECTION -->
<section data-transition="slide" data-background-transition="slide">
<!-- PRESENTATON INTRO -->
<section id="intro" class="inner-slide content-left" data-background="img/slide-intro.png">
<div class="max-50 mt-3 ml4">
<h1 class="size60">Accessibility Training</h1>
<hr>
<h2>Accesssible Content</h2>
<img class="icon-img maxpx-80 mb1" alt="accessibility icon" src="img/icon-a11y.png">
<p class="subheading center max-80 mb2">Making Your Web Content Inclusive for All</p>
<p><a href="https://karma-dharma.github.io/accessible-content" target="_blank">karma-dharma.github.io/accessible-content</a></p>
<p class="size25">Jaime Medvesky</p>
</div>
</section>
<!-- END -->
<!-- TRANING TOPICS -->
<section id="topics" class="inner-slide content-left" data-background="img/slide2.png" data-transition="slide" data-background-transition="zoom">
<div class="max-70">
<h1 class="mt-4 mb1">Today's Topics</h1>
<hr class="mt1 mb3">
<ul class="fragment fade-left list list-circle list-col-two ml4 size32">
<li><a class="white" href="/#/whatis/8">Overview</a> <span class="white">&</span> <a class="white" href="/#/compliance/16">Legal Terms</a></li>
<li><a class="white" href="/#/standards/7">Standards</a> <span class="white">&</span> <a class="white" href="/#/wcag/13">Compliance</a></li>
<li><a class="white" href="/accessible-content/#/types/9">Types of Disabilities</a></li>
<li><a class="white" href="/accessible-content/#/benefits/5">Benefits of Accessibility</a></li>
<li><a class="white" href="/accessible-content/#/assistive/2">Assistive Technologies</a></li>
<li><a class="white" href="/accessible-content/#/stats/12">Statistics for Literacy</a></li>
<li><a class="white" href="/accessible-content/#/4/1/9">Why Reading Level Matters</a></li>
<li><a class="white" href="/accessible-content/#/5/0/3">Best Practices - Web Content</a></li>
<li><a class="white" href="/accessible-content/#/images/9">Best Practices - Digital Media</a></li>
<li><a class="white" href="/accessible-content/#/6/3/8">Beware of Overlays</a></li>
<li><a class="white" href="/accessible-content/#/testing/1">Testing Your Content</a></li>
<li><a class="white" href="/accessible-content/#/conclusion">Questions & Answers</a></li>
<li><a class="white" href="/accessible-content/#/resources-main">Resources</a></li>
<li><a class="white" href="/accessible-content/#/glossary-1">Glossary</a></li>
</ul>
<p class="mt3 size24 italic">(Click a topic to go directly to that section in the presentation)</p>
</div>
</section>
<!-- END SLIDE-->
</section>
<!-- END SECTION -->
<!-- OVERVIEW SECTION -->
<section data-transition="slide" data-background-transition="slide">
<!-- "A11Y" EXPLAINED -->
<section id="a11y" class="full" data-background="img/slide-blank1.png" data-transition="slide" data-background-transition="zoom">
<img class="icon-img maxpx-100 mt-1" src="img/icon-a11y.png" alt="accessibility icon">
<h1 class="fragment fade-right mb1">"A11Y"</h1>
<img id="superman" class="fragment on-top" src="img/superman2.png">
<p><span class="fragment fade-in-then-semi-out mt0">It's a number!</span><span class="fragment fade-in-then-semi-out"> ..It's a word!</span>
<br/><span class="fragment fade-in">...It's a Numeronym!</span></p>
<p class="fragment fade-left mt-1 size26">( a number-based word )</p>
<p class="fragment zoom-in white size30">Abbreviation for "accessibility"</p>
<p class="fragment fade-left white size28"><span class="italic">"<span class="yellow">A</span> - <span class="yellow">eleven</span> - <span class="yellow">Y</span>"</span> <span class="fragment fade-right">- ( or ) - <span class="italic">"<span class="yellow">A</span> - <span class="yellow">one</span> - <span class="yellow">one</span> - <span class="yellow">Y</span>"</span></span></p>
<div class="fragment fade-down line1 blue mt1">
<p class="size50"><span>A</span><span class="sr-text">ccessibilit</span>Y</p>
</div>
<div class="fragment fade-up line2 ltyellow">
<p class="size40"><span class="sr-text">A</span>ccessibilit<span class="sr-text">Y</span></p>
</div>
<div class="fragment fade-up line3">
<p class="size50"><span>\</span>/</p>
</div>
<div class="fragment fade-up line4 white">
<p>( 11 letters )</p>
</div>
<div class="fragment fade-down line5 ltyellow bold">
<p class="mtb0">↓</p>
<p class="size45 mt-1"><span class="blue size50">A</span>11<span class="blue size50">Y</span></p>
</div>
<!-- Slide Notes -->
<aside class="notes">
<p>Ironically, "a11y" is not accessible! 😆</p>
<br>
<p>Other examples of numeronyms:
<br>i18n - internationalization
<br>g11n - globalization
<br>l10n - localization </p>
</aside>
<!-- End of Notes -->
</section>
<!-- END SLIDE-->
<!-- DEFINITONS -->
<section id="whatis" class="inner-slide content-left" data-background="img/slide-overview.png" data-transition="slide" data-background-transition="zoom">
<div class="max-60 ml3 alignleft">
<h1 class="mt-3 size60">A11y Overview</h1>
<hr class="mt-1 mb3">
<ul class="list list-circle mt-3 ml-1 size28">
<li class="fragment fade-right mt2"><p><span class="white bold underline">Accessibility</span> <span class="fragment"> - A concept that focuses on whether all users are able to access an equivalent user experience, however they encounter a product or service.<sup>1</sup></span></p></li>
<li class="fragment fade-left mt2 mb1"><p><span class="bold white underline">Web Accessibility</span> <span class="fragment">- The practice of making sure that websites and related tools can be used by everyone, however it's accessed and regardless of a person's ability or disability.</span></p></li>
<hr class=" fragment fade-up mt2 mb1">
<li class="fragment fade-up mt2"><p><span class="bold white underline">Inclusive Practices</span> <span class="fragment">- considers the needs of individuals with diverse abilities and provides equitable access to information and resources.</span></p></li>
<li class="fragment fade-down mt2"><p><span class="bold white underline">Inclusive Content</span> <span class="fragment">- Concept of writing content to be understandable and accessible to the greatest extent possible by everyone, regardless of age, ability, or status in life.</span></p></li>
</ul>
</div>
</section>
<!-- END SLIDE-->
<!-- LEGAL TERMS & COMPLIANCE -->
<section id="compliance" class="inner-slide content-right" data-background="img/slides-justice.png" data-transition="slide" data-background-transition="slide">
<div class="max-75">
<h1 class="mt-1-5 size50">A11Y Legal Terms</h1>
<hr class="mt-1 mb0">
<ul class="list no-bullet mt0 ml2 size28">
<li class="fragment fade-right mt1 mb0 size30 floatl max-45 aligncenter"><h2>ADA</h2>
<p class="fragment fade-right ltyellow bold mt-1-5">Americans with Disabilities Act</p>
<ul class="list list-circle ml2 mt1">
<li class="fragment fade-right size26 mt1">U.S. civil rights law prohibiting discrimination against people with disabilities by guaranteeing equal access to all areas of public life.</li>
<li class="fragment fade-right size26 mt1">Mandated by the Department of Justice (DOJ).</li>
<li class="fragment fade-right size26 mt1">Non-compliance means you could face a discrimination lawsuit.</li>
</ul>
<hr class=" fragment fade-up mt2 mb1-5">
<ul class="list list-dash ml3 mt1">
<li class="fragment fade-right size26"><span class="white">Title I</span> - Employment</li>
<li class="fragment fade-left size26"><span class="white">Title II</span> - Transportation</li>
<li class="fragment fade-right size26"><span class="white">Title III</span> - Public accommodations</li>
</ul>
</li>
<li class="fragment fade-right mt1 mb0 size30 floatl max-45 aligncenter"><h2>Section 508</h2>
<p class="fragment fade-right white ltyellow bold mt-1-5">Rehabilitation Act of 1973</p>
<ul class="list list-circle ml2 mt1 mr-2">
<li class="fragment fade-left size26 ml1-5">U.S. Federal law ensuring that people with disabilities have equal access to government information and services.</li>
<li class="fragment fade-left size26 ml1-5">Requires digital assets made or used by the federal government or with their funding be accessible.</li>
<li class="fragment fade-left size26 ml1-5">Companies that contract with federal government must also meet standards, or lose federal funding.</li>
</ul>
<hr class=" fragment fade-up mt1 mb1 ml2 mr-5">
<ul class="list list-dash ml4 mt1 mr-3">
<li class="fragment fade-right size26"><span class="yellow">1998</span> - Section 508 is added to the Rehab Act of 1973 to incorporate digital a11y requirements.</li>
<li class="fragment fade-right size26"><span class="yellow">2017</span> - Federal agencies and vendors must follow WCAG standards.</li>
</ul>
</li>
</ul>
</div>
<!-- Slide Notes -->
<aside class="notes">
<ul>
<li>Section 508 is a SUB-section, not part of the original Rehabilitation Act of 1973</li>
<li>Digital assets = Websites, Apps, Digital Kiosks, Telephones, Multimedia and other digital information communication tools (ICT) and content.</li>
<li>Applies to Vendors in the private sector.</li>
<li>Does NOT apply to private companies that supply products/services directly to the public, local & state governments, or to non-profit organizations.</li>
</ul>
</aside>
<!-- End Notes -->
</section>
<!-- END SLIDE-->
<!-- STANDARDS - WCAG -->
<section id="standards" class="inner-slide content-left" data-background="img/slide-wcag.png" data-transition="slide" data-background-transition="slide">
<div class="max-75">
<h1 class="mt-4 mb1">A11y Standards</h1>
<hr class="mt0 mb2">
<h2 class="fragment fade-left size42 mt-1 mb1">WCAG</h2>
<h3 class="fragment fade-right size30 mt0 mb2 ltyellow lowerc">(Web Content Accessibility Guidelines)</h3>
<ul class="list list-dash mt-1 ml1 size30 max-90">
<li class="fragment fade-right floatl max-47 ml-1 mr3">Global guidelines on how to make content accessible for all users.</li>
<li class="fragment fade-left floatl max-47 ml0 mr0">The most-referenced set of standards in accessibility lawsuits</li>
<div style="clear: both"></div>
<li class="fragment fade-right floatl max-47 mt2 ml-1 mr3">Original version (1.0) was released in May, 1999.</li>
<li class="fragment fade-left floatl max-47 mt2 ml0 mr0">3 version updates:<br>2.0, 2.1, and 2.2 (October, 2023)</li>
<div style="clear: both"></div>
<li class="fragment fade-right floatl max-47 mt3 ml-1 mr3">Developed by <span class="white">W3C</span>:
<br>(<span class="white">W</span>orld <span class="white">W</span>ide <span class="white">W</span>eb <span class="white">C</span>onsortium) <br><br><span class="size26">Organization that creates the main international standards organization for the Internet.</span></li>
<li class="fragment fade-left floatl max-47 mt3 ml0 mr0">Published by <span class="white">WAI</span>:
<br>(<span class="white">W</span>eb <span class="white">A</span>ccessibility <span class="white">I</span>nitiative)<br><br><span class="size26">A project created to make the internet universally accessible.</span></li>
</ul>
</div>
</section>
<!-- END SLIDE-->
<!-- COMPLIANCE - WCAG -->
<section id="wcag" class="inner-slide content-right" data-background="img/slide-compliance.png" data-transition="slide" data-background-transition="slide">
<div class="max-90 ml20">
<h1 class="mt-2 mb1 size55">WCAG Compliance</h1>
<hr class="mt0 mb1">
<ul class="list list-circle mt-0-5 ml7 size26 max-85">
<li class="fragment fade-up">Three <span class="white">(3)</span> levels of conformance:
<div style="clear:both;"></div>
<div class="fragment fade-up aligncenter floatl circle circle1 mt1 ml-1 mr1 max-30">
<span class="bold white size35 ltyellow">A</span>
<p class="size20 mt0-5 mb0">-The most basic, least strict level.
<p class="size20 mt0-5">-Includes the most essential requirements.</p>
<p class="size22 white mt0-5 bold">25 success criteria</p>
</div>
<div class="fragment fade-up circle circle2 aligncenter floatl mt1 mr1 max-32">
<span class="bold white size35 ltyellow">AA</span>
<p class="size20 mt0-5 mb0">-The most desired level of compliance.</p>
<p class="size20 mt0-5">-Most websites should aim for Level AA conformance</p>
<p class="size22 white mt0-5 bold">(A) + 13 success criteria</p>
</div>
<div class="fragment fade-up circle circle3 aligncenter floatl mt1 max-32">
<span class="bold white size35 ltyellow">AAA</span>
<p class="size20 mt0-5 mb0">-Includes the most strict requirements.</p>
<p class="size20 mt0-5">-Some type of content unable to meet all success criteria.</p>
<p class="size22 white mt0-5 bold">(A) + (AA) + 23 success criteria</p>
</div>
</li>
<li class="fragment fade-up floatl mt3">Four <span class="white">(4)</span> main principles : <span class="pink">P</span> - <span class="green">O</span> - <span class="yellow">U</span> - <span class="purple">R</span>
<div style="clear: both"></div>
<!-- Perceivable -->
<div class="fragment fade-up border1 padt1 padb1 mt1">
<div class="fragment fade-up max-22 floatl white aligncenter mt0 ml1 mr1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Pro 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" style="fill:hotpink" opacity=".4" d="M95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 400a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/><path class="fa-primary" style="fill:hotpink" d="M224 256c35.3 0 64-28.7 64-64c0-7.1-1.2-13.9-3.3-20.3c-1.8-5.5 1.6-11.9 7.4-11.7c40.8 1.7 77.5 29.6 88.6 71.1c13.7 51.2-16.7 103.9-67.9 117.6s-103.9-16.7-117.6-67.9c-1.9-6.9-2.9-13.9-3.2-20.7c-.3-5.8 6.1-9.2 11.7-7.4c6.4 2.1 13.2 3.3 20.3 3.3z"/>
<path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg><br/>
<span class="pink"><span class="underline pink">P</span>erceivable</span>
<br>
<span class="fragment fade-down white size20 mt1">|<br>Must be available via sight, hearing and/or touch</span>
</div>
<!-- Operable -->
<div class="fragment fade-up max-23 floatl white mt0 mr1 aligncenter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" style="fill:#AEF1A2;" opacity=".4" d="M128 40c0-22.1 17.9-40 40-40s40 17.9 40 40V188.2c8.5-7.6 19.7-12.2 32-12.2c20.6 0 38.2 13 45 31.2c8.8-9.3 21.2-15.2 35-15.2c25.3 0 46 19.5 47.9 44.3c8.5-7.7 19.8-12.3 32.1-12.3c26.5 0 48 21.5 48 48v48 16 48c0 70.7-57.3 128-128 128l-16 0H240l-.1 0h-5.2c-5 0-9.9-.3-14.7-1c-55.3-5.6-106.2-34-140-79L8 336c-13.3-17.7-9.7-42.7 8-56s42.7-9.7 56 8l56 74.7V40zM240 304c0-8.8-7.2-16-16-16s-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304zm48-16c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304c0-8.8-7.2-16-16-16zm80 16c0-8.8-7.2-16-16-16s-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304z"/><path class="fa-primary" style="fill:#53DE3B;" d="M224 288c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V304c0-8.8 7.2-16 16-16zm64 0c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V304c0-8.8 7.2-16 16-16zm80 16v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V304c0-8.8 7.2-16 16-16s16 7.2 16 16z"/><path d="M128 52c0-19.9 16.1-36 36-36s36 16.1 36 36V192.2c0 2.9 1.6 5.6 4.2 7s5.7 1.3 8.2-.3c6.8-4.4 15-6.9 23.7-6.9c19 0 35.3 12.1 41.4 29c.9 2.4 2.8 4.2 5.2 4.9s5.1 .3 7.1-1.3c7.3-5.5 16.4-8.7 26.3-8.7c19.9 0 36.7 13.2 42.1 31.3c.7 2.2 2.3 4.1 4.4 5s4.6 .9 6.7-.1c5.7-2.7 12.1-4.2 18.8-4.2c24.3 0 44 19.7 44 44l0 28v88c0 48.6-39.4 88-88 88H272 256 207c-39.5 0-76.8-18.2-101-49.4L22.7 339.6c-10.9-13.9-8.3-34.1 5.6-44.9s34.1-8.3 44.9 5.6l40.4 52c2.1 2.7 5.7 3.8 8.9 2.7s5.4-4.2 5.4-7.6V52zM164 0c-28.7 0-52 23.3-52 52V324.1L85.9 290.5c-16.3-20.9-46.4-24.7-67.4-8.4s-24.7 46.4-8.4 67.4L93.3 456.4C120.6 491.5 162.5 512 207 512h49 16 72c57.4 0 104-46.6 104-104V320l0-28c0-33.1-26.9-60-60-60c-6.1 0-12 .9-17.6 2.6C360.8 214.2 340.1 200 316 200c-10 0-19.3 2.4-27.6 6.7C278.1 188.4 258.5 176 236 176c-7 0-13.7 1.2-20 3.4V52c0-28.7-23.3-52-52-52zm60 312c0-4.4-3.6-8-8-8s-8 3.6-8 8V424c0 4.4 3.6 8 8 8s8-3.6 8-8V312zm64 0c0-4.4-3.6-8-8-8s-8 3.6-8 8V424c0 4.4 3.6 8 8 8s8-3.6 8-8V312zm64 0c0-4.4-3.6-8-8-8s-8 3.6-8 8V424c0 4.4 3.6 8 8 8s8-3.6 8-8V312z"/></svg>
<br>
<span class="green"><span class="underline green">O</span>perable</span>
<br>
<span class="fragment fade-down white size20 mt1">|<br>Must be able to navigate with different input methods</span>
</div>
<!-- Understandable -->
<div class="fragment fade-up max-23 floatl white aligncenter mt0 mb0 l-1 mr1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" style="fill:#faf8bf;" opacity=".6" d="M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3 0 0 0 0 0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM128 208a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm128 0a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm96 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/><path class="fa-primary" style="fill:#faf8bf;" d="M96 240a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm160-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/><path d="M157.3 415c-5-1.8-10.6-1-14.9 2.1c-11 8-29.4 19.3-51.2 28.8C68.3 456 41.6 464 16 464l.1-.1 0 0 0 0 .3-.3 .1-.1c.4-.4 .9-.9 1.5-1.6c1.3-1.4 3.2-3.6 5.4-6.3l-12.2-10 12.2 10C28 450 34 442 40 432c10.7-17.9 21.4-42.1 23.6-69.9c.3-4.3-1.1-8.6-3.9-11.8C31.9 318.8 16 280.7 16 240C16 136.9 120.2 48 256 48s240 88.9 240 192s-104.2 192-240 192c-35.2 0-68.6-6.1-98.7-17zM4.7 452.7l0 0 0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3 0 0zM144 240a16 16 0 1 1 -32 0 16 16 0 1 1 32 0zm-16-32a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm144 32a16 16 0 1 1 -32 0 16 16 0 1 1 32 0zm-16-32a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm128 48a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm-32-16a32 32 0 1 0 64 0 32 32 0 1 0 -64 0z"/></svg>
<br>
<span class="yellow"><span class="underline yellow">U</span>nderstandable</span>
<br>
<span class="fragment fade-down white size20 mt1">|<br>Must be readable, predictable, with clear instruction</span>
</div>
<!-- Robust -->
<div class="fragment fade-up max-24 floatl white aligncenter mt0 ml0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Pro 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" style="fill:#d7bdff;" opacity=".6" d="M0 256c0-17.7 14.3-32 32-32v64c-17.7 0-32-14.3-32-32zm448 32H192V224H448v64zm160 0V224c17.7 0 32 14.3 32 32s-14.3 32-32 32z"/><path class="fa-primary" style="fill:#BF94FF;" d="M128 32c-17.7 0-32 14.3-32 32v64H64c-17.7 0-32 14.3-32 32V352c0 17.7 14.3 32 32 32H96v64c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H128zm384 0H480c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V384h32c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H544V64c0-17.7-14.3-32-32-32z"/><path d="M184 48c13.3 0 24 10.7 24 24V256 440c0 13.3-10.7 24-24 24H152c-13.3 0-24-10.7-24-24V376 136 72c0-13.3 10.7-24 24-24h32zM112 408v32c0 22.1 17.9 40 40 40h32c22.1 0 40-17.9 40-40V264H416V440c0 22.1 17.9 40 40 40h32c22.1 0 40-17.9 40-40V408c6.7 5 15 8 24 8h16c22.1 0 40-17.9 40-40V264h24c4.4 0 8-3.6 8-8s-3.6-8-8-8H608V136c0-22.1-17.9-40-40-40H552c-9 0-17.3 3-24 8V72c0-22.1-17.9-40-40-40H456c-22.1 0-40 17.9-40 40V248H224V72c0-22.1-17.9-40-40-40H152c-22.1 0-40 17.9-40 40v32c-6.7-5-15-8-24-8H72c-22.1 0-40 17.9-40 40V248H8c-4.4 0-8 3.6-8 8s3.6 8 8 8H32V376c0 22.1 17.9 40 40 40H88c9 0 17.3-3 24-8zM528 136c0-13.3 10.7-24 24-24h16c13.3 0 24 10.7 24 24V256 376c0 13.3-10.7 24-24 24H552c-13.3 0-24-10.7-24-24V136zM512 376v64c0 13.3-10.7 24-24 24H456c-13.3 0-24-10.7-24-24V256 72c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v64V376zM112 136V376c0 13.3-10.7 24-24 24H72c-13.3 0-24-10.7-24-24V256 136c0-13.3 10.7-24 24-24H88c13.3 0 24 10.7 24 24z"/></svg><br>
<span class="purple"><span class="underline purple">R</span>obust</span>
<br><span class="fragment fade-down white size20 mt1">|
<br>Must work with a variety of assistive technologies, browsers, and devices</span>
</div>
<div style="clear: both"></div>
</div>
</li>
</ul>
</div>
<!-- Slide Notes -->
<aside class="notes">
<p><strong>Perceivable</strong> - forms with sub-labels <i>below</i> the field</p>
<p><strong>Operable</strong> - unclickable phone numbers, or form Submit button that is not shown until checkbox is checked</p>
<p><strong>Understandable</strong> - MOST content a11y issues fall in this category
<br>vague link text - "<i>Learn more</i>"
<br>extraneous link text, "<i>click here to go to the Products page</i>" </p>
<p><strong>Robust</strong> - </p>using outdated, non-semantic HTML tags, such as <<code>font</code>>, <<code>b</code>>, <<code>i</code>>, or if proper HTML semantic ARIA landmarks are not used (role="main", role="banner")
<br> these make it difficult for assistive tools such as screen-readers to interpret the page or the page elements
</ul>
</aside>
<!-- End Notes -->
</section>
<!-- END SLIDE-->
</section>
<!-- END SECTION -->
<!-- DISABILITIES TYPES, BENEFITS, STATS -->
<section data-transition="slide" data-background-transition="slide">
<!-- TYPES OF DISABILITIES -->
<section id="types" class="inner-slide content-right" data-background="img/slide-types.png" data-transition="slide" data-background-transition="zoom">
<div class="max-80">
<h1 class="mb-1 max-50 center size65">Types of Disabilities</h1>
<ul class="list-inline mt0">
<li class="fragment fade-down mt-3-5">
<img class="icon-img maxpx-100 center" src="img/icon-visual.png">Visual Impairments
<hr>
<ul class="fragment fade-left mb0 list list-dash">
<li>Low Vision / Blindness</li>
<li>Lost Glasses</li>
<li>Sun Glare</li>
</ul>
</li>
<li class="fragment fade-up mt3">
<img class="icon-img maxpx-100 center" src="img/icon-hearing.png">Hearing Impairments
<hr>
<ul class="fragment fade-right list list-dash">
<li>Hard of Hearing / Deafness</li>
<li>Ear Infection</li>
<li>Loud environment</li>
</ul>
</li>
<li class="fragment fade-down mt7">
<img class="icon-img maxpx-100 center" src="img/icon-speech.png">Speech Impairments
<hr>
<ul class="fragment fade-left list list-dash">
<li>Non-verbal</li>
<li>Laryngitis</li>
<li>Heavy accent</li>
</ul>
</li>
<li class="fragment fade-up mt3">
<img class="icon-img maxpx-100 center" src="img/icon-motor.png">Motor Disabilities
<hr>
<ul class="fragment fade-right list list-dash">
<li>Rheumatoid Arthritis</li>
<li>Broken Arm</li>
<li>Holding Baby</li>
</ul>
</li>
<li class="fragment fade-down mt-3-5">
<img class="icon-img maxpx-100 center" src="img/icon-cognitive.png">Cognitive Disabilities
<hr>
<ul class="fragment fade-left list list-dash">
<li>Epilepsy, Dyslexia, ADHD</li>
<li>Brain Injury / Concussion</li>
<li>Sleep-Deprived</li>
</ul>
</li>
</ul>
</div>
<!-- Slide Notes -->
<aside class="notes">
<p>Disabilities are broken into 3 types:
<br/>1 - Permanent - disability is for an extended period of time, or lifetime
<br/>2 - Temporary - disability exists for a short period of time
<br/>3 - Situational - disability exists, due to a situation
</p>
</aside>
<!-- End Notes -->
</section>
<!-- END SLIDE-->
<!-- PERSONA SPECTRUM -->
<section id="persona" class="inner-slide full slide-persona" data-background="img/slide-blank2.png" data-transition="slide">
<h1 class="mb1">The Persona Spectrum</h1>
<div class="fragment fade-up">
<img class="max-70 mt1" src="img/persona-spectrum2.jpg">
<p class="footnote">~Infographic by <a target="_blank" href="https://designpositive.medium.com/why-web-accessibility-22ca880b2963">Design Positive</a></p>
</div>
</section>
<!-- END SLIDE-->
<!-- BENEFITS -->
<section id="benefits" class="inner-slide" data-background="img/slide-blank2.png">
<div class="max-92 center">
<h1 class="mt-1">Benefits of A11Y</h1>
<hr class="mtb0">
<ul class="list list-circle ml4 size30">
<li class="fragment fade-left mb1-5">A11y benefits everyone!</li>
<li class="fragment fade-right">
<img class="img-right maxpx-400 mt-4 ml5" src="img/curbcut.png">
<span class="toptext mt4 ltyellow">"Curb-cut Effect"</span><span class="fragment fade-right normal offwhite"> - the phenomenon of disability-friendly features being used and appreciated by a larger group than the people they were designed for.</span></li>
<li class="fragment fade-down mt1-5"><span class="toptext"> Did you know?</span><span class="fragment fade-right"> - People with disabilities are the innovators and creators of many new technologies..</span>
<ul class="fragment fade-up list list-dash list-col-three ml2">
<li class="white size26">Typewriter</li>
<li class="white size26">Email</li>
<li class="white size26">The Internet..!</li>
<li class="white size26">Audiobooks</li>
<li class="white size26">Speech-to-Text</li>
<li class="white size26">Phone Mounts</li>
<li class="white size26">Cruise Control</li>
<li class="white size26">Driverless Cars</li>
<li class="white size26">Electronic Toothbrushes</li>
<li class="white size26">Bendy Straws</li>
<li class="white size26">Can Openers</li>
<li class="white size26">The huddle! (as you see in football)</li>
</ul>
</li>
</ul>
</div>
<!-- Slide Notes -->
<aside class="notes">
<p>Curb cuts - the slopes at street corners that make it easy to roll between the sidewalk and the street
<p>Phrase was named after the event that took place in the 1960's..
<br>..group of disabled activist protestors (the "Rolling Quads") attending Berkley College
<br> snuck out in the middle of the night with sledgehammers and bags of cement
<br> poured wet cement it in front the curbs at every corner of over 26 intersections, in order to create what are very well-known today as, "curb cuts"
</p>
<p>This action was fueled by anger & frustration
<br>They knew they had to do something extreme to get their point across and in a big way
<br>They were experiencing freedom for the 1st time
<br>Motorized wheelchairs were becoming more readily available, and hence no longer needing someone to wheel them around everywhere
</p>
<p>But then what about the 6" curb that's in front of them??
<br>"It might as well be Mount Everest" - described by one of the activist members
</p>
<p>Seeing in how so many people were benefiting from these curbs, the city built the first planned, wheelchair-accessible route in the U.S., IN 1977)</p>
<p>The curb-cuts spread like wildfire all across the country, and even all over the world</p>
<p>This was a RADICAL IDEA at the time - that people with disabilities had civil rights, too
<br>this was a time when if you were paralyzed or had any kind of motor dysfunction, you were most likely sent to an institution
<br>The norm back then was to say, "We don't want to see that - they're going to make the normal people too uncomfortable."
<br>But this was also the 60's were there were many groups rising up, against the war, and against the establishment in general
<br>so this event fit right in with the revolutionary spirit of the 60's and early 70s.
</p>
<p>Another memorable event..
<br>1977, disability rights protesters hit federal office buildings in eleven cities at once.
<br>-pushing the government to act on long-neglected rules protecting the disabled in all facilities taking federal money.
<br>The protest in San Francisco turned into a MONTH-LONG sit-in, with steady news coverage of people in wheelchairs, taking care of each other and refusing to leave until action was taken.
</p>
<p>IT WASN'T UNTIL 1990, when the ADA Act was finally signed in as a bill by George H. W. Bush
<br>The President compared it the the recent FALL OF THE BERLIN WALL
<br>.."now another wall was about to be brought down."
</p>
</aside>
<!-- End Notes -->
</section>
<!-- END SLIDE-->
<!-- BENEFITS FOR COMPANIES AND WEBSITES -->
<section id="benefits-company" class="inner-slide content-right" data-background="img/slide-benefits.png" data-transition="slide" data-background-transition="slide">
<div class="max-64">
<h1 class="mt-4 size60">Company/Website Benefits</h1>
<hr>
<ul class="list list-col-two list-check mt3">
<li class="fragment fade-right">Improve User Experience</li>
<li class="fragment fade-right">Enhance Search Engine Optimization (SEO)</li>
<li class="fragment fade-right">Increase Profitability</li>
<li class="fragment fade-right">Competitive Advantage</li>
<li class="fragment fade-right">Reach a Wider Audience</li>
<li class="fragment fade-left">Improve Reputation</li>
<li class="fragment fade-left">Increase Website Usability</li>
<li class="fragment fade-left">Meet Legal Requirements</li>
<li class="fragment fade-left">Demonstrate Ethical Responsibility</li>
<li class="fragment fade-left">Future-Proof Your Website</li>
</ul>
</div>
</section>
</section>
</section>
<!-- END SECTION -->
<!-- ASSISTIVE TECHNOLOGIES SECTION -->
<section data-transition="slide" data-background-transition="slide">
<!-- A.T. DEFINITION & EXAMPLES -->
<section id="assistive" class="inner-slide content-right slide-assistive" data-background="img/slide-assistive.png" data-transition="slide" data-background-transition="slide">
<div class="max-64">
<h1 class="mt-2">Assistive Technology (AT)</h1>
<hr>
<ul class="list list-circle">
<li class="fragment zoom-in size30">Any device or software designed to assist people with disabilities in various aspects of their lives, such as accessing web content.</li>
<li class="fragment zoom-in mt1"><span class="white size30">Examples:</span>
<ul class="fragment fade-down list list-col-two list-dash size26 ml2">
<li>Screen readers - <span class="italic">JAWS or NVDA for (Windows), VoiceOver for (Mac and iOS)</span></li>
<li>Magnifiers</li>
<li>Voice Recognition</li>
<li>Braille Displays</li>
<li>Text-to-Speech Software</li>
<li>Switch controls </li>
<li>Adaptive Apps</li>
</ul>
</li>
</ul>
<img class="bottom-img ml-5" src="img/assistive-tech.png" alt="clipart of various assistive technologies">
</div>
<!-- Slide Notes -->
<aside class="notes">
<p>Screen Reader acronym meanings:</p>
<p>JAWS = Job Access with Speech</p>
<p>NVDA = Non-Visual Desktop Access</p>
<p> Switch Control - for anyone with limited mobility - for iPhone - works by activating a switch, such as pressing an external adaptive button, performing a head movement, or making a voiced or voiceless sound</p>
</aside>
<!-- End of Notes -->
</section>
<!-- END SLIDE-->
<!-- SCREEN READER DEFINITION -->
<section id="screen-reader" class="inner-slide content-right" data-background="img/slide-screenreader.png" data-transition="slide" data-background-transition="slide">
<div class="max-75">
<h1 class="mt-2">The Screen Reader</h1>
<hr class="mt0 mb1">
<ul class="list list-circle mt1 size29">
<li class="fragment fade-up mt2">A software program that takes the on-screen text from a website or computer screen and <span class="fragment highlight-green">reads it out loud</span> for users with visual impairments.</li>
<li class="fragment fade-up mt2">Allows for <span class="fragment highlight-green">visual cues</span>, such as images, graphics or table headers to be perceived when additional codes are provided within the document:
<ul class="fragment list list-dash list-col-two max-55 mt2 size26 ml4">
<li class="ltyellow">Image alt tags</li>
<li class="ltyellow">Key landmarks</li>
<li class="ltyellow">Navigation headings</li>
<li class="ltyellow">Form labels</li>
</ul>
</li>
<li class="fragment fade-up mt2"><span class="fragment highlight-green">Keyboard commands</span> such as <code>[TAB]</code>, <code>[SPACEBAR]</code>, <code>[ENTER]</code> are used to instruct the screen reader to perform actions such as read a word, a line or full screen of text, announce the location of the cursor or "focused" item, and more.</li>
</ul>
</div>
</section>
<!-- END SLIDE-->
<!-- SCREEN READER DEMO VIDEO -->
<section id="sr-video" class="inner-slide full" data-background="img/slide-blank2.png" data-transition="slide" data-background-transition="slide">
<div class="max-80 center">
<h1>The Screen Reader Experience</h1>
<hr class="mt-1 mb1">
<div class="fragment fade-up mt-2">
<video width="850" height="500" controls>
<source src="video/sr-demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</section>
<!-- END SLIDE-->
</section>
<!-- END SECTION -->
<!-- LITERACY STATISTICS SECTION -->
<section data-transition="slide" data-background-transition="slide">
<!-- STATISTICS -->
<section id="stats" class="inner-slide content-left" data-background="img/slide-stats.png">
<div class="max-64">
<h1 class="mt-3 mb1 size60">Literacy Statistics</h1>
<hr class="mb1">
<p class="fragment fade-left alignleft toptext size30">Let's look at some statistics for American adults...</p>
<ul class="list list-none mt-1 ml2">
<li><p><span class="fragment fade-up blue size45 bold">9%</span><span class="fragment fade-left"> - (<span class="white">23.2 million</span>) do not have a high school diploma. (2022)<sup>2</sup></span></p>
</li>
<li><p><span class="fragment fade-up blue size45 bold">54%</span><span class="fragment fade-left"> - (<span class="white">140 million</span>) are not able to read a book written at an eighth (8th)-grade level or above. (2018)<sup>3</sup></span></p>
</li>
<li><p><span class="fragment fade-down blue size45 bold">21%</span><span class="fragment fade-right"> - (<span class="white">54 million</span>) have low levels of literacy and cannot take a written literacy assessment test. (2019)<sup>4</sup></span></p>
</li>
<li><p><span class="fragment fade-down blue size45 bold">18%</span><span class="fragment fade-right"> - (<span class="white">48 million</span>) lack basic reading, writing, and math skills beyond a third (3rd)-grade level. (2023)<sup>5</sup></span></p>
</li>
<li><p><span class="fragment fade-up blue size45 bold">4%</span><span class="fragment fade-left"> - (<span class="white">10 million</span>) are unable to read at all, and considered to be completely illiterate. (2017)<sup>6</sup></span></p>
</li>
<li><p><span class="fragment fade-up blue size45 bold">7th-8th grade</span><span class="fragment fade-left"> - The average American adult reading level<sup>7</sup></span></p>
</li>
</ul>
</div>
</section>
<!-- END SLIDE-->
<!-- READING LEVEL -->
<section class="inner-slide content-right" data-background="img/slide8.png" data-transition="slide" data-background-transition="slide">
<div class="max-55 mr3">
<h1 class="mt-3 mb0 mt-1 size50">Why Reading Level Matters</h1>
<hr>
<ul class="list list-circle white size28 mt-1">
<li class="fragment zoom-in mt1">Any written text that scores above the eighth (8th)-grade level will not be accessible to an average U.S. website visitor</li>
<li class="fragment zoom-in mt2">Consider those who struggle with longer words and sentences:
<ul class="list list-dash resources-list mt1 size24">
<li class="fragment fade-left ltyellow ml2 mt0">English language learners</li>
<li class="fragment fade-left ltyellow ml2 mt0-5">People with reading disabilities</li>
</ul>
</li>
<li class="fragment zoom-in mt2">Know your audience
<ul class="list list-dash resources-list size24 mt1">
<li class="fragment fade-left ltyellow ml2 mt0"> Write content for the reading level of your audience</li>
</ul>
</li>
<li class="fragment zoom-in mt2">Understand that people learn in different ways<sup>8</sup>:
<ul class="list list-dash resources-list white size24 mt1">
<li class="fragment fade-left ltyellow ml2 mt0"><span class="white">65%</span> - visual learners</li>
<li class="fragment fade-left ltyellow ml2 mt0-5"><span class="white">30%</span> - auditory learners</li>
<li class="fragment fade-left ltyellow ml2 mt0-5"><span class="white">5%</span> - Kinesthetic learners - (need to engage/get involved)</li>
</ul>
</li>
</ul>
</div>
<!-- Slide Notes -->
<aside class="notes">
<p>The average American reads at a 7th-8th-grade level - this is a large percent of your visitors.</p>
<p>NOT JUST PEOPLE WHO YOU MIGHT THINK OF AS "DISABLED"!</p>
<p>Know your audience - don't use 5th-grade reading level on a medical site with doctors as visitors</p>
<p>stats for how people learn are from 2017</p>
<p>Eye-tracking studies have shown that people don’t read left-to-right, top-to-bottom</p>
</aside>
<!-- End of Notes -->
</section>
<!-- END SLIDE-->
</section>
<!-- END SECTION -->
<!-- WRITING A11Y CONTENT SECTION -->
<section data-transition="slide" data-background-transition="slide">
<!-- WRITING FOR A11Y -->
<!-- GENERAL TIPS -->
<section class="inner-slide content-right" data-background="img/slide-reading.png" data-transition="slide" data-background-transition="slide">
<div class="max-70 ml2">
<h1 class="mt-2 mb0-5 size50">Writing Accessible Content</h1>
<hr class="mb0">
<div class="floatl max-45 mr3">
<h2 class="fragment fade-up mt1-5 mb-1 ml-3 alignleft size28 ltyellow">General Writing Tips:</h2>
<ul class="fragment fade-right list list-circle size24 ml-1">
<li class="mt1">Keep paragraphs short - (<span class="italic">4-5 sentences maximum</span>).</li>
<li class="mt1">Keep sentences concise, focusing on one idea - (<span class="italic">20 words or less</span>).</li>
<li class="mt1">Use clear, useful, inclusive, plain language content.</li>
<li class="mt1">Avoid jargon, slang, or complex terms:
<br class="mb1"><span class="size22">"<span class="italic white">Submission received</span>" vs. "<span class="italic white">We Got Your Feedback</span>"</span></li>
<li class="mt1-5">Inject creativity - add humor and wit; let your personality come through.</li>
<li class="mt1">Minimize adjectives and adverbs to only what's necessary.</li>
<li class="mt1">Use transition words to link ideas (e.g., <span class="italic white">"furthermore", "however", "therefore", "finally"</span>).</li>
</ul>
</div>
<div class="floatl max-50">
<h2 class="fragment fade-up mt1-5 mb-1 ml-2 alignleft size28 ltyellow">Structuring Your Content:</h2>
<ul class="fragment fade-right list list-circle size22 ml0">
<li class="mt1">Start with an outline - organize your main points before writing.</li>
<li class="mt1">Format consistently using style sheets, section headings, and bulleted lists.</li>
<li class="mt1">Apply a proper heading hierarchy, starting with one <<code>h1</code>> per page.
<br class="mb0-5"><span class="size22">Subheadings (<<code>h2</code>>, <<code>h3</code>>) should follow logically under it.</span></li>
<li class="mt1">Avoid using heading tags for styling - instead, use a class:
<br class="mb0-5"><<code>p class="h2"</code>></li>
<li class="mt1">Break up text with headings to make content "<span class="italic white">skimmable</span>".</li>
<li class="mt1">Replace paragraphs with bulleted or numbered lists where possible.</li>
<li class="mt1">Consider diverse backgrounds - race, gender, age, culture, language, ability.</li>
</ul>
</div>
</div>
</section>
<!-- END SLIDE-->
<!-- CONTENT TIPS -->
<section class="inner-slide content-right" data-background="img/slide-reading.png" data-transition="slide" data-background-transition="slide">
<div class="max-70 ml2">
<h1 class="mt-2 mb1 size50">Writing Accessible Content</h1>
<hr class="mb1">
<div class="floatl max-50 mr3">
<h2 class="fragment fade-up mt1-5 mb-1 ml-3 alignleft size28 ltyellow">Formatting & Best Practices:</h2>
<ul class="fragment fade-right list list-circle size22 ml-1 mr0">
<li class="mt1">Avoid writing in ALL CAPS.</li>
<li class="mt1">Spell out special characters:
<br class="mb0-5">"<span class="italic white">1st</span>" vs. "<span class="italic white">first</span>" / "<span class="italic white">1pm - 3pm</span>" vs. "<span class="italic white">1pm to 3pm</span>"</li>
<li class="mt1">Spell out abbreviations for the first reference and always spell out common abbreviations:
<br class="mb0-5">"<span class="italic white">NJ</span>" to "<span class="italic white">New Jersey</span>", or "<span class="italic white">Fri</span>" to "<span class="italic white">Friday</span>"</li>
<li class="mt1">Avoid redundant links (e.g., don’t apply the same link to both an image and adjacent text).</li>
<li class="mt1">Avoid using phrases such as "<span class="italic white">click here</span>" in link text.
<br class="mb0-5">Instead use descriptive link language that clearly explains the link’s destination or purpose:
<br class="mb0-5">"<span class="size20"><span class="italic white">Explore our Products</span>" vs. "<span class="italic white">click here to explore our products</span>"</span></li>
<li class="mt1">Tag all images with descriptive ALT text.</li>
<li class="mt1">Use visuals - imagery can transcend language and cultural barriers.</li>
</ul>
</div>
<div class="floatl max-40 mr2">
<h2 class="fragment fade-up mt1-5 mb-1 alignleft size28 ltyellow">Enhancing Readability</h2>
<ul class="fragment fade-right list list-circle size22 ml2 mr-2">
<li class="mt1">Use numbered or bulleted lists for clarity.</li>
<li class="mt1">Provide a simplified summary before or after key content, considering the "5 W's" (<span class="italic white">Who, What, Where, When, Why</span>).</li>
<li class="mt1">Include transition words for smooth reading (e.g., <span class="italic white">"additionally", "however", "therefore"</span>).</li>
<li class="mt1">Provide a Table of Contents for easier navigation through longer content.</li>
<li class="mt1">Ask questions to engage readers and stimulate thought or conversation.</li>
<li class="mt1">Visual storytelling - paint a picture with your words to help readers envision your ideas.</li>
</ul>
</div>
</div>
<!-- Slide Notes -->
<aside class="notes">
<p>Too many colors can be disorienting for people with cognitive disbilities</p>
</aside>
<!-- End of Notes -->
</section>
<!-- END SLIDE-->
<!-- CONTENT TIPS -->
<section class="inner-slide content-right" data-background="img/slide-reading.png" data-transition="slide" data-background-transition="slide">
<div class="max-70">
<h1 class="mt-3 mb1 size50">Writing Accessible Content</h1>
<hr class="mb1">
<div class="floatl max-47">
<h2 class="fragment fade-up mt1-5 mb-1 ml-3 alignleft size26 ltyellow">Screen Reader & Assistive Technology Tips:</h2>
<ul class="fragment fade-right list list-circle ml-1 mr3 size24">
<li class="mt1-5">Include <<code>screen-reader-text</code>> after vague link descriptions (e.g., "<span class="italic white">Learn More</span>" or "<span class="italic white">Click here</span>") to describe the link's purpose.</li>
<li class="mt1-5">Provide "<span class="italic white">skip links</span>" when there's a large number of links before the main content (e.g., an A-Z glossary or a calendar with daily links).</li>
<li class="mt1-5">Use high contrast colors to ensure text and visuals stand out.</li>
<li class="mt1-5">Ensure form fields are properly labeled with <<code>label</code>> tags and sub-labels are placed above input fields.</li>
</ul>
</div>
<div class="floatl max-47">
<h2 class="fragment fade-up mt1-5 mb-1 alignleft size26 ltyellow">Balance Accessibility & Automation:</h2>
<ul class="fragment fade-right list list-circle size24 mr-1">
<li class="mt1-5">Avoid being "<span class="italic white">overly accessible</span>" - this can be just as problematic as being inaccessible.</li>
<li class="mt1-5">Avoid accessibility overlays - they rarely improve UX and interfere with other assistive technologies.</li>
<li class="mt1-5">Use automated tools like <span class="white">ChatGPT</span> to simplify content, provide summaries, or create bullet points.
<li class="mt1-5">Don’t rely solely on automated accessibility checkers - manual testing is essential for finding key issues.</li>
</ul>
</div>
</div>
</section>
<!-- END SLIDE-->
</section>
<!-- END SECTION -->
<!-- DIGITAL MEDIA SECTION -->
<section data-transition="slide" data-background-transition="slide">
<!-- IMAGES -->
<section id="images" class="inner-slide content-right" data-background="img/slide-imagery.png" data-transition="slide" data-background-transition="slide">
<div class="max-70">
<h1 class="mt-2 size55">Accessible Images</h1>
<hr class="mt-1 mb0">
<ul class="list list-circle vatop size26">
<li class="fragment fade-down">All images should include an image alt tag.
<ul class="list-dash white size26 ml2">
<li class="fragment fade-down mt1 white size24"><span class="ltyellow">Decorative images</span> - add an <<code>alt</code>> tag with an empty value:
<br class="mb1"><span class="size22"><<code>img src="/images/decorative.jpg" alt=""</code>></span>
<img class="mt-3 mr5" style="float: right; width:75px;" src="img/decorative.jpg"></li>
<li class="fragment fade-down white size24 mt1-5"><span class="ltyellow">Non-decorative images</span> - provide an <code>alt</code> text description as it relates <br>to the content.
<div class="fragment fade-up">
<img class="mt-1 mr3" style="float: right; width: 175px" src="img/kinghenry.jpg">
<p class="mt1"><span class="italic">For example:</span> Article on King Henry III:</p>
<div class="fragment fade-up floatl mt0 mr1 max-34">
<span class="ltyellow">History article:</span>
<br><br><span class="italic">"King Henry VIII of England looking stern and wearing lavish royal clothing."</span>
</div>
<div class="fragment fade-down floatl mt0 max-35">
<span class="ltyellow">Fashion article:</span>
<br><br><span class="italic">"King Henry VIII of England wearing a fur-trimmed hat and cape, and bedazzled silver and gold jewelry."</span>
</div>
</div>
</li>
<div style="clear: both"></div>
</ul>
</li>
<li class="fragment fade-down white size26 mt-2"><code>SVG</code> images:
<ul class="fragment fade-up list-dash white size26">
<li class="fragment fade-down white size24 ml2"><span class="ltyellow">Decorative -</span> apply <<code>aria-hidden="true"</code>></li>
<li class="fragment fade-down white size24 ml2"><span class="ltyellow">Non-decorative -</span> add a <<code>title</code>> to describe the image.</li>
</ul>
</li>
</ul>
</div>
</section>
<!-- END SLIDE-->
<!-- AUDIO/VIDEO -->
<section id="audio" class="inner-slide content-right" data-background="img/slide10.png" data-transition="slide" data-background-transition="slide">
<div class="max-70">
<h1 class="mt-1 size55">Accessible Audio & Video</h1>
<hr class="mt-1 mb0">
<div class="floatl max-48 ml4">
<ul class="fragment fade-left list list-circle size26 ml4 mr2">
<li class="white">Avoid auto-playing audio/video.</li>
<li class="white">Provide controls to turn on video captions and subtitles (non-auditory), or transcriptions (non-visual).</li>
<li class="white">Make sure video controls are always available (also for image sliders that auto-play).</li>
</ul>
</div>
<div class="floatl max-40">
<ul class="fragment fade-right list list-circle size26 ml2">
<li class="white">Include descriptive captions.</li>
<li class="white">Incorporate audio descriptions for low-vision users (see video below).</li>
<li class="white">Add subtitles in video.</li>
<li class="white">Use YouTube's captioning services to add captions.</li>
</ul>
</div>
<iframe class="fragment fade-up mt2" width="500" height="285" src="https://www.youtube.com/embed/O7j4_aP8dWA?si=FF_kBfNAI9Mk02O5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</ul>
</div>
</section>
<!-- END SLIDE-->
<!-- PDFS -->
<section id="pdfs" class="inner-slide content-right" data-background="img/slide-forms.png" data-transition="slide" data-background-transition="slide">
<div class="max-70 center mr0">
<h1 class="size50 mt-3">PDF/Electronic Docs</h1>
<hr class="mt-1 mb1">
<p class="size30 alignleft max-80 center mb2 ml6 lh1-1"><span class="fragment fade-right bold white">Document accessibility</span><span class="fragment fade-left"> - ensures your electronic content (such as PDFs), is universally understandable, navigable, and barrier-free, regardless of your readers' abilities.</span></p>
<h2 class="fragment size34 mt3 mb0 ltyellow">Common PDF Issues <sup>9</sup></h2>
<div class="floatl max-55">
<ul class="list list-dash size24 mt1 ml5 mr3">
<li class="fragment mt0"><span class="bold white">Structural flaws</span> - Disorganized flows make it tough for people using assistive technologies to navigate and comprehend content</li>
<li class="fragment mt1-5"><span class="bold white">Missing image alt text</span> - Incomplete or lacking image descriptions in alt text exclude users with disabilities from experiencing images</li>
<li class="fragment mt1-5"><span class="bold white">Text troubles</span> - Un-selectable text in scanned documents or images hinders assistive technologies, reading, and searching</li>
</ul>
</div>
<div class="floatl max-42">
<ul class="list list-dash size24 mt1">
<li class="fragment mt0"><span class="bold white">Navigation nightmares</span> - Broken or poorly labeled hyperlinks block users from moving through documents smoothly</li>
<li class="fragment mt1-5"><span class="bold white">Unusable form fields</span> - Lack of clear labeling for fields prevents form completion for all users, particularly those with disabilities</li>
<li class="fragment mt1-5"><span class="bold white">Tables and lists</span> - Malformed tables, without proper row and column headings, prevent users from navigating tabular data</li>
</ul>
</div>
</div>
</section>
<!-- END SLIDE-->
<!-- BEWARE OF OVERLAYS -->
<section class="inner-slide content-left" data-background="img/slide-overlays.png" data-transition="slide" data-background-transition="slide">
<div class="max-60">
<h1 class="mt-3 mb1 size45">Beware of Overlays</h1>
<hr class="mb1">
<img class="mt0" style="max-width: 75px;" src="img/icon-overlay2.png" alt="accessibility icon">
<ul class="list list-circle size26 mt-1-5 ml2 mr-2">
<li class="fragment fade-right">An accessibility overlay is a JavaScript solution designed to address accessibility issues on a website or web app.</li>
</ul>
<h2 class="fragment fade-up mt2 mb1 ml2 size26 ltyellow alignleft">Disadvantages</h2>
<ul class="list list-dash size26 mt-1 ml2 mr-2">
<li class="fragment fade-right white">Don't fix accessibility issues, but instead they're
<br>trying to mask it.</li>
<li class="fragment fade-right white">Don't protect you from an accessibility lawsuit.
<img style="float: right; margin-right: 0; margin-top: -3rem; max-width: 260px" src="img/graph-overlays-SML.jpg"></li>
<li class="fragment fade-right white">Can overwrite existing accessibility settings, hindering the accessibility of your site.</li>
<li class="fragment fade-right white">Most users strongly dislike overlays.</li>
<li class="fragment fade-right white">Slow down your website.</li>
<li class="fragment fade-right white">There's no agreed upon format - they are all different.</li>
<li class="fragment fade-right white">Our devices already have most of the features offered.</li>
</ul>
</div>
</section>
<!-- END SLIDE-->
</section>
<!-- END SECTION -->
<!-- TESTING ACCESSIBILITY -->
<section data-transition="slide" data-background-transition="slide">
<!-- TESTING TOOLS/RESOURCES -->
<section id="testing" class="inner-slide content-right slide-testing" data-background="img/slide-testing.png" data-transition="slide" data-background-transition="slide">
<div class="max-78 ml24">
<h1 class="size50 mt-2">How to Test Content</h1>
<hr class="mt-1">
<div class="fragment fade-left float-section br max-44 ml1 mr4 padr2">
<h2 class="alignleft ltyellow mb0 size30">Automated Testing:</h2>
<ul class="list list-dash resources-list size22 mt0">
<li class="mt1"><a target="_blank" href="https://wave.webaim.org/">WAVE</a> - (Add-on or extension) - use <code>Details</code> & <code>Structure</code> tabs to check for content issues.</li>
<li class="mt1"><a target="_blank" href="https://equalizedigital.com/accessibility-checker/">Accessibility Checker</a> - (Wordpress plugin) - highlights issues/errors on both the front-end of the site, and also in the back-end Editor while you are adding or editing content.</li>
<li class="mt1"><a target="_blank" href="https://www.webfx.com/tools/read-able/">Readability Test (FX Tools)</a> - evaluates web page content and provides scores & breakdowns for the most-used readability indicators.</li>
<li class="mt1"><a target="_blank" href="https://www.accessibilitycloud.com/">Web Accessibility Testing Platform</a> - Free Basic plan (1 site, 1 user), then monthly costs for higher level use.</li>
<li class="mt1"><a target="_blank" href="https://webaim.org/resources/evalquickref/">Testing Web Content for Accessibility</a></li>
</ul>
</div>
<div class="fragment fade-right float-section w47 max-47 mr-5">
<h2 class="alignleft size30 ltyellow mb0">Manual Testing:</h2>
<ul class="list list-dash resources-list size22 mt0">
<li class="mt1"><code>Screen-reader</code> (NVDA, JAWS, Mac over IOS) - use with keyboard commands (<<code>Tab</code>>/<<code>Enter</code>>/<<code>Spacebar</code>>) to navigate your page.</li>
<li class="mt1"><code>Zoom-in (Text-Only)</code> browser setting - Zoom-in at 200% to ensure nothing cuts or falls off page.</li>
<li class="mt1"><code>CSS</code> & <code>Javascript</code> - turn off styles & scripts in browser settings to ensure content is still accessible.</li>
<li class="mt1"><code>Images</code> - check <code>alt text</code> is descriptive and relevant - (right-click on image, select "<code>Inspect</code>", then locate <code>alt="..."</code> in the <<code>img</code>> tag to review the alt text).</li>
<li class="mt1"><code>Check colors</code> - verify colors meet the minimum contrast ratio using <a target="_blank" href="https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF">Color Contrast Checker</a>.</li>
</ul>
</div>
</div>
</section>
<!-- END SLIDE-->
</section>
<!-- END SECTION -->
<!-- CONCLUSION SECTION -->
<section data-transition="slide" data-background-transition="slide">
<!-- Q&A PAGE -->
<section id="conclusion" class="inner-slide center the-end" data-background="img/slide-blank1.png" data-transition="slide" data-background-transition="slide">
<div class="max-60 center">
<h1>Questions & Answers</h1>
</div>
</section>
<!-- END SLIDE-->
<!-- THANK YOU PAGE -->
<section id="thanks" class="slide-inner content-left" data-background="img/slide-thanks2.png" data-transition="slide" data-background-transition="slide">
<div class="max-60">
<h1>Thank You!</h1>
<hr/>
<ul class="list list-inline list-sm">
<li><a target="_blank" href="https://www.facebook.com/karmadharma.agency"><img src="img/smicon2-fb.png"></a></li>
<li><a target="_blank" href="https://www.instagram.com/karmadharma.agency/"><img src="img/smicon2-instagram.png"></a></li>
<li><a target="_blank" href="https://www.linkedin.com/company/karmadharma-agency/"><img src="img/smicon2-linkedin.png"></a></li>
</ul>
<p class="ltyellow bold">Questions?</p>
<p>Feel free to email me!<br/>
<a href="mailto:[email protected]" class="underline">[email protected]</a></p>
</div>
</section>
<!-- END SLIDE-->
</section>
<!-- END SECTION -->
<!-- RESOURCES SECTION-->
<section data-transition="slide" data-background-transition="slide">
<!-- RESOURCES INTRO PAGE -->
<section id="resources-main" class="inner-slide content-center slide-resources" data-background="img/resources-main.png" data-transition="slide" data-background-transition="slide">
<div class="max-80 center">
<div class="ml13-5">
<h1 class="mt-3">Resources</h1>
<hr class="mt-1 mb1">
</div>
</div>
</section>
<!-- END SLIDE-->
<!-- DEV RESOURCES -->
<section id="resources-dev" class="inner-slide content-center slide-resources" data-background="img/slide-blank2.png" data-transition="slide" data-background-transition="slide">
<div class="max-100 center padl3">
<h1 class="size50 mt-3 ml-1">Development Resources</h1>
<hr class="mt-1 mb0">
<h2 class="alignleft size26 ml3 mt2 mb0">Testing / Tools</h2>
<ul class="list list-dash list-float size24 ml5 mt0 mr3">
<li class="mt1-5"><a target="_blank" href="https://accessibilityinsights.io/docs/web/overview/">Accessibility Insights for Web</a> - find and fix accessibility issues in web apps and sites with both automated and manual assessment-driven testing tools</li>
<li class="mt1-25"><a target="_blank" href="https://wave.webaim.org/">WAVE</a> - automated accessibility testing tool</li>
<li class="mt1-25"><a target="_blank" href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk">Lighthouse</a> - performs an audit for a specific web page and generates a report with a full range of factors, including accessibility</li>
<li class="mt1-25"><a target="_blank" href="https://www.deque.com/axe/devtools/">axe DevTools</a> - automated testing tool to find and fix accessibility issues on single page or all web pages</li>
<li class="mt1-25"><a target="_blank" href="https://validator.w3.org/">Markup Validation Service</a> - checks the validity of code</li>
<li class="mt1-25"><a target="_blank" href="https://equalizedigital.com/accessibility-checker/">Accessibility Checker</a> - automated scanning plugin that flags issues on both the front-end and back-end of site</li>
<li class="mt1-25"><a target="_blank" href="https://odellus.com/odellus?COMPLYFirstElementVOverview">COMPLYFirst Element-V</a> - automated and manual testing with the ability to create, save or share error reports</li>
</ul>