forked from a11yproject/a11yproject.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
checklist.html
1068 lines (1052 loc) · 51.6 KB
/
checklist.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
---
layout: page
title: Checklist
description: Determine how accessible your site is
permalink: checklist/
---
<nav class="toc-wrap toc-long" aria-labelledby="toc_title">
<h2 id="toc_title" class="toc-title">Categories</h2>
<ul class="toc">
<li><a class="content" href="#section-content">Content</a></li>
<li><a class="global-code" href="#section-global-code">Global code</a></li>
<li><a class="keyboard" href="#section-keyboard">Keyboard</a></li>
<li><a class="images" href="#section-images">Images</a></li>
<li><a class="headings" href="#section-headings">Headings</a></li>
<li><a class="lists" href="#section-lists">Lists</a></li>
<li><a class="controls" href="#section-controls">Controls</a></li>
<li><a class="tables" href="#section-tables">Tables</a></li>
<li><a class="forms" href="#section-forms">Forms</a></li>
<li><a class="media" href="#section-media">Media</a></li>
<li><a class="appearance" href="#section-appearance">Appearance</a></li>
<li><a class="animation" href="#section-animation">Animation</a></li>
<li><a class="color-contrast" href="#section-color-contrast">Color Contrast</a></li>
<li><a class="mobile-touch" href="#section-mobile-touch">Mobile/Touch</a></li>
</ul>
</nav>
<section class="resources-section checklist-introduction" id="section-introduction" aria-labelledby="label-introduction">
<h2 id="label-introduction">Introduction</h2>
<p>
This checklist uses the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">The Web Content Accessibility Guidelines (<abbr>WCAG</abbr>)</a> as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments.
</p>
<p>
There are three levels of accessibility compliance in the WCAG, which reflect the priority of support:
</p>
<ol>
<li><strong>A</strong>: Essential. If this isn't met, assistive technology may not be able to read, understand, or fully operate the page or view.</li>
<li><strong>AA</strong>: Ideal support. Now required for EU government and public body websites.</li>
<li><strong>AAA</strong>: High-level support. This is typically reserved for sites that serve a specialized audience.</li>
</ol>
<p>
This checklist targets many, but not all level A and AA concerns. Note that the different levels of WCAG support do not necessarily indicate an increased level of difficulty to implement.
</p>
<h3 id="success-criteria">Success criteria</h3>
<p>
Each item on this checklist has a corresponding WCAG "success criterion." Success criterion are the specific, testable rules that power the WCAG, described by a reference number and short title. For example, the rule about text resizing is called <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">1.4.4 Resize text</a>.
</p>
<p>
Some accessibility issues may have multiple success criterion apply to them. We have identified the most relevant for each checklist item.
</p>
<h3 id="does-this-checklist-guarantee-my-site-is-accessible">Does this checklist guarantee my site is accessible?</h3>
<p>
No. However, addressing the issues called out in this checklist will help improve the experience for everyone who uses your site.
</p>
<p>
The issues this checklist prompts you to check for covers a wide range of disability conditions. There is no such thing as "perfect accessibility" or a site being "100% accessible". You should be wary of companies and services that make such promises. If you need professional accessibility help, use <a href="resources#professional-help">professional accessibility services</a>.
</p>
</section>
<section class="article-section resources-section checklist-section" id="section-content" aria-labelledby="label-content">
<h2 id="label-content">Content</h2>
<p>
Content is the most important part of your site.
</p>
<div class="checklist">
<details id="use-plain-language-and-avoid-figures-idioms-and-complicated-metaphors">
<summary>
Use plain language and avoid figures of speech, idioms, and complicated metaphors.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-other-lang-id.html">3.1.2 Language of Parts</a>
</p>
<p class="checklist-description">
Write content at <a href="https://datayze.com/readability-analyzer.php">an 8th grade reading level</a>.
</p>
</div>
</details>
<details id="make-sure-that-button-a-and-label-element-content-is-unique-and-descriptive">
<summary>
Make sure that <code>button</code>, <code>a</code>, and <code>label</code> element content is unique and descriptive.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
</p>
<p class="checklist-description">
Terms like "click here" and "read more" do not provide any context. Some people navigate using a list of all buttons or links on a page or view. When using this mode, the terms indicate what will happen if navigated to or activated.
</p>
</div>
</details>
<details id="use-left-aligned-text-for-left-to-right-languages-and-right-aligned-text-for-right-to-left-languages">
<summary>
Use left-aligned text for left-to-right languages, and right-aligned text for right-to-left languages.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
</p>
<p class="checklist-description">
Centered-aligned or justified text is difficult to read.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-global-code" aria-labelledby="label-global-code">
<h2 id="label-global-code">Global code</h2>
<p>
Global code is code that affects your entire website.
</p>
<div class="checklist">
<details id="validate-your-html">
<summary>
Validate your HTML.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html">4.1.1 Parsing</a>
</p>
<p class="checklist-description">
<a href="https://validator.w3.org/nu/">Valid HTML</a> helps to provide an consistent, expected experience across all browsers and assistive technology.
</p>
</div>
</details>
<details id="use-a-lang-attribute-on-the-html-element">
<summary>
Use a <code>lang</code> attribute on the <code>html</code> element.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-doc-lang-id.html">3.1.1 Language of Page</a>
</p>
<p class="checklist-description">
This helps screen readers to <a href="https://github.com/FreedomScientific/VFO-standards-support/issues/188">pronounce content correctly</a>.
</p>
</div>
</details>
<details id="provide-a-unique-title-for-each-page-or-view">
<summary>
Provide a unique <code>title</code> for each page or view.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">2.4.2 Page Titled</a>
</p>
<p class="checklist-description">
The <code>title</code> element, contained in the document's <code>head</code> element, is often the first piece of information announced by assistive technology. This helps tell people what page or view they are going to start navigating.
</p>
</div>
</details>
<details id="ensure-that-viewport-zoom-is-not-disabled">
<summary>
Ensure that viewport zoom is not disabled.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">1.4.4 Resize text</a>
</p>
<p class="checklist-description">
Some people need to increase the size of text to a point where they can read it. Do not stop them from doing this, even for sites with a native app-like experience (even native apps should respect Operating System settings for resizing text).
</p>
</div>
</details>
<details id="use-landmark-elements-to-indicate-important-content-regions">
<summary>
Use landmark elements to indicate important content regions.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">4.1.2 Name, Role, Value</a>
</p>
<p class="checklist-description">
Landmark regions help communicate the layout and important areas of a page or view, and can allow quick access to these regions. For example, use the <code>nav</code> element to wrap a site's navigation, or the <code>main</code> element to contain the primary content of a page.
</p>
</div>
</details>
<details id="ensure-a-linear-content-flow">
<summary>
Ensure a linear content flow.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html">2.4.3 Focus Order</a>
</p>
<p class="checklist-description">
Remove <code>tabindex</code> attribute values that aren't either <code>0</code> or <code>-1</code>. Elements that are inherently focusable, such as links or buttons, do not require a <code>tabindex</code>. Elements that are not inherently focusable should not have a <code>tabindex</code> applied to them outside of very specific use cases.
</p>
</div>
</details>
<details id="avoid-using-the-autofocus-attribute">
<summary>
Avoid using the <code>autofocus</code> attribute.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html">2.4.3 Focus Order</a>
</p>
<p class="checklist-description">
People who are blind or who have low vision may be disoriented when focus is moved without their permission. Additionally, <code>autofocus</code> can be problematic for people with motor control disabilities, as it may create extra work for them to navigate out from the autofocused area and to other locationso on the page/view.
</p>
</div>
</details>
<details id="remove-session-timeouts">
<summary>
Remove session timeouts.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">2.2.1 Timing Adjustable</a>
</p>
<p class="checklist-description">
If you cannot, let the person using your site know the timeout exists ahead of time, and provide significant notice before the timer runs out.
</p>
</div>
</details>
<details id="remove-session-timeouts">
<summary>
Remove <code>title</code> attribute tooltips.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">4.1.2 Name, Role, Value</a>
</p>
<p class="checklist-description">
The <code>title</code> attribute has <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title#Accessibility_concerns">numerous issues</a>, and should not be used if the information provided is important for all people to access. An acceptable use for <code>title</code> would be labeling an <code>iframe</code> element to indicate what content it contains.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-keyboard" aria-labelledby="label-keyboard">
<h2 id="label-keyboard">Keyboard</h2>
<p>
It is important that your interface and content can be operated, and navigated by use of a keyboard. Some people cannot use a mouse, or may be using other assistive technologies that may not allow for "hovering" or precise clicking.
</p>
<div class="checklist">
<details id="make-sure-there-is-a-visible-focus-style-for-interactive-elements-that-are-navigated-to-via-keyboard-input">
<summary>
Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html">2.4.7 Focus Visible</a>
</p>
<p class="checklist-description">
Can a person navigating with a keyboard, <a href="https://axesslab.com/switches/">switch</a>, or screen reader see where they currently are on the page?
</p>
</div>
</details>
<details id="check-to-see-that-keyboard-focus-order-matches-the-visual-layout">
<summary>
Check to see that keyboard focus order matches the visual layout.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">1.3.2 Meaningful Sequence</a>
</p>
<p class="checklist-description">
Can a person navigating with a keyboard or screen reader move around the page in a predictable way?
</p>
</div>
</details>
<details id="remove-invisible-focusable-elements">
<summary>
Remove invisible focusable elements.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html">2.4.3 Focus Order</a>
</p>
<p class="checklist-description">
Remove the ability to focus on elements that are not presently meant to be discoverable. This includes things like inactive drop down menus, off screen navigations, or modals.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-images" aria-labelledby="label-images">
<h2 id="label-images">Images</h2>
<p>
Images are a very common part of most websites. There are techniques you can use to help make sure they are enjoyable by all.
</p>
<h3 id="all-images">All images</h3>
<div class="checklist">
<details id="make-sure-that-all-img-elements-have-an-alt-attribute">
<summary>
Make sure that all <code>img</code> elements have an <code>alt</code> attribute.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">1.1.1 Non-text Content.</a>
</p>
<p class="checklist-description">
<code>alt</code> attributes (alt text) give a description of an image for people who may not be able to view them. When an <code>alt</code>ttribute isn't present on an image, a screen reader may announce the image's file name and path instead, failing to communicate the image’s content.
</p>
</div>
</details>
<details id="make-sure-that-decorative-images-have-empty-alt-attribute-values">
<summary>
Make sure that decorative images have empty <code>alt</code> attribute values.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">1.1.1 Non-text Content</a>
</p>
<p class="checklist-description">
Decorative images do not communicate information that is required to understanding the website's content. Historically they were used for flourishes and <a href="https://en.m.wikipedia.org/wiki/Spacer_GIF">spacer gif images</a>, but are less relevant for modern websites. Empty <code>alt</code> attributes are also sometimes known as null alt attributes.
</p>
</div>
</details>
<details id="provide-a-text-alternative-for-complex-images-such-as-charts-graphs-and-maps">
<summary>
Provide a text alternative for complex images such as charts, graphs, and maps.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">1.1.1 Non-text Content</a>
</p>
<p class="checklist-description">
Is there a plain text which lists points on the map or sections of a flowchart? Describe all visible information. This includes graph axes, data points and labels, and the overall point the graphic is communicating.
</p>
</div>
</details>
<details id="for-images-containing-text-make-sure-the-alt-description-includes-the-images-text">
<summary>
For images containing text, make sure the <code>alt</code> description includes the image's text.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">1.1.1 Non-text Content</a>
</p>
<p class="checklist-description">
For example, the FedEx logo should have an alt value of "FedEx."
</p>
</div>
</details>
</div>
<h3 id="svgs">SVGs</h3>
<p>
SVGs are images described using markup.
</p>
<div class="checklist">
<details id="make-sure-that-svg-elements-include-the-code-focusable-false-when-they-are-the-child-element-of-a-focusable-element">
<summary>
Make sure that <code>svg</code> elements include the code <code>focusable="false"</code> when they are the child element of a focusable element.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
</p>
<p class="checklist-description">
This prevents Internet Explorer from allowing focus to navigate through the child elements of an SVG that is meant to be decorative.
</p>
</div>
</details>
<details id="add-aria-hidden-true-to-svg-that-is-decorative">
<summary>
Add <code>aria-hidden="true"</code> to <code>svg</code> that is decorative.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">4.1.2 Name, Role, Value</a>
</p>
<p class="checklist-description">
This is equivalent to an empty/null <code>alt</code> value on a non-<code>svg</code> image.
</p>
</div>
</details>
<details id="make-sure-that-svg-utilizing-the-use-element-has-whitespace-between-the-svg-and-use-elements">
<summary>
Make sure that <code>svg</code> utilizing the <code>use</code> element has whitespace between the <code>svg</code> and <code>use</code> elements.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html">2.1.2 No Keyboard Trap</a>
</p>
<p class="checklist-description">
This solves a bug in Safari which sometimes creates hidden tab-stops when navigating.
</p>
</div>
</details>
<details id="ensure-that-img-elements-with-an-svg-source-includes-the-role-img-attribute">
<summary>
Ensure that <code>img</code> elements with an <code>svg</code> source includes the <code>role="img"</code> attribute.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">4.1.2 Name, Role, Value</a>
</p>
<p class="checklist-description">
VoiceOver on macOS and iOS will not correctly convey the element as an image if <code>role="img"</code> is not present.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-headings" aria-labelledby="label-headings">
<h2 id="label-headings">Headings</h2>
<p>
Heading elements (<code>h1</code>, <code>h2</code>, <code>h3</code>, etc.) help break up the content of the page into related "chunks" of information.
</p>
<div class="checklist">
<details id="use-heading-elements-to-introduce-content">
<summary>
Use heading elements to introduce content.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">2.4.6 Headings or Labels</a>
</p>
<p class="checklist-description">
Heading elements construct a document outline, and should not be used for purely visual design.
</p>
</div>
</details>
<details id="use-only-one-h1-element-per-page-or-view">
<summary>
Use only one <code>h1</code> element per page or view.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">2.4.6 Headings or Labels</a>
</p>
<p class="checklist-description">
The <code>h1</code> element should be used to communicate the high-level purpose of the page or view. Do not use the <code>h1</code> element for a heading that does not change between pages or views (for example, the site's name).
</p>
</div>
</details>
<details id="heading-elements-should-be-written-in-a-logical-sequence">
<summary>
Heading elements should be written in a logical sequence.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">2.4.6 Headings or Labels</a>
</p>
<p class="checklist-description">
<a href="https://webdesign.tutsplus.com/articles/the-importance-of-heading-levels-for-assistive-technology--cms-31753">The order of heading elements</a> should descend, based on the "depth" of the content. For example, an <code>h4</code> element should not appear on a page before an <code>h3</code> element.
</p>
</div>
</details>
<details id="dont-skip-heading-levels">
<summary>
Don't skip heading levels.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">2.4.6 Headings or Labels</a>
</p>
<p class="checklist-description">
For example, don't jump from a <code>h2</code> to a <code>h4</code>, skipping a <code>h3</code> element. If heading levels are being skipped for a specific visual treatment, use CSS classes instead.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-lists" aria-labelledby="label-lists">
<h2 id="label-lists">Lists</h2>
<p>
Lists let people know the content is related, and how many items are included in the grouping.
</p>
<div class="checklist">
<details id="use-list-elements-for-list-content">
<summary>
Use list elements (<code>ol</code>, <code>ul</code>, and <code>dl</code>) for list content.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
</p>
<p class="checklist-description">
This may include sections of related content, items visually displayed in a grid-like layout, or sibling <code>a</code> elements.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-controls" aria-labelledby="label-controls">
<h2 id="label-controls">Controls</h2>
<p>
Controls are interactive elements such as links and buttons that let a person navigate to a destination or perform an action.
</p>
<div class="checklist">
<details id="use-the-a-element-for-links">
<summary>
Use the <code>a</code> element for links.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
</p>
<p class="checklist-description">
Links should always have a <code>href</code> attribute, even when used in Single Page Applications. Without a <code>href</code> attribute, the link will not be properly exposed to assistive technology. An example of this would be a link that uses an <code>onclick</code> event, in place of a <code>href</code> attribute.
</p>
</div>
</details>
<details id="ensure-that-links-are-recognizable">
<summary>
Ensure that links are recognizable.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">1.4.1 Use of Color</a>
</p>
<p class="checklist-description">
Color alone is not sufficient to indicate the presence of a link. Underlines are a popular and commonly-understood way to communicate the presence of link content.
</p>
</div>
</details>
<details id="ensure-that-controls-have-focus-states">
<summary>
Ensure that controls have <code>:focus</code> states.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html">2.4.7 Focus Visible</a>
</p>
<p class="checklist-description">
Visible focus styles help people determine wihch interactive element has keyboard focus. This lets them know that they can perform actions like activating a button or navigating to a link's destination.
</p>
</div>
</details>
<details id="use-the-button-element-for-buttons">
<summary>
Use the <code>button</code> element for buttons.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
</p>
<p class="checklist-description">
Buttons are used to submit data or perform an on-screen action which does not shift keyboard focus.
</p>
</div>
</details>
<details id="provide-a-skip-link-and-make-sure-that-it-is-visible-when-focused">
<summary>
Provide a skip link and make sure that it is visible when focused.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">2.4.1 Bypass Blocks</a>
</p>
<p class="checklist-description">
A <a href="/posts/skip-nav-links/">skip link</a> can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget.
</p>
</div>
</details>
<details id="identify-links-that-open-in-a-new-window">
<summary>
Identify links that open in a new window.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a>
</p>
<p class="checklist-description">
Doing this will help people understand what will happen when activating the link. Ideally this information should be communicated in a way that is available to all users.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-tables" aria-labelledby="label-tables">
<h2 id="label-tables">Tables</h2>
<p>
Tables are a structured set of data that help people understand the relationships between different types of information.
</p>
<div class="checklist">
<details id="use-the-table-element-to-describe-tabular-data">
<summary>
Use the <code>table</code> element to describe tabular data.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
</p>
<p class="checklist-description">
Do you need to display data in rows and columns? Use the <code>table</code> element.
</p>
</div>
</details>
<details id="use-th-for-table-headers">
<summary>
Use <code>th</code> for table headers (with appropriate scope attributes).
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html">4.1.1 Parsing</a>
</p>
<p class="checklist-description">
Depending on <a href="https://www.w3.org/WAI/tutorials/tables/">how complex your table is</a>, you may also consider using <code>scope="col"</code> for column headers, <code>scope="row"</code> for row headers. Many different kinds of assistive technology still use the scope attribute to help them understand and describe the structure of a table.
</p>
</div>
</details>
<details id="use-the-caption-element-to-provide-a-title-for-the-table">
<summary>
Use the <code>caption</code> element to provide a title for the table.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">2.4.6 Headings or Labels</a>
</p>
<p class="checklist-description">
The table's <code>caption</code> should describe what kind of information the table contains.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-forms" aria-labelledby="label-forms">
<h2 id="label-forms">Forms</h2>
<p>
Forms allow people to enter information into a site for processing and manipulation. This includes things like sending messages and placing orders.
</p>
<div class="checklist">
<details id="all-inputs-in-a-form-are-associated-with-a-corresponding-label-element">
<summary>
All inputs in a form are associated with a corresponding <code>label</code> element.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html">3.2.2 On Input</a>
</p>
<p class="checklist-description">
Use a <code>for</code>/<code>id</code> pairing to guarantee the highest level of browser/assistive technology support.
</p>
</div>
</details>
<details id="use-fieldset-and-legend-elements-where-appropriate">
<summary>
Use <code>fieldset</code> and <code>legend</code> elements where appropriate.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
</p>
<p class="checklist-description">
Does your form contain multiple sections of related inputs? Use <code>fieldset</code> to group them, and <code>legend</code> to provide a label for what this section is for.
</p>
</div>
</details>
<details id="inputs-use-autocomplete-where-appropriate">
<summary>
Inputs use <code>autocomplete</code> where appropriate.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">1.3.5 Identify Input Purpose</a>
</p>
<p class="checklist-description">
<a href="https://www.w3.org/TR/html52/sec-forms.html#sec-autofill">Providing a mechanism</a> to help people more quickly, easily, and accurately fill in form fields that ask for common information (for example, name, address, phone number).
ted.
</div>
</details>
<details id="make-sure-that-form-input-errors-are-displayed-in-list-above-the-form-after-submission">
<summary>
Make sure that form input errors are displayed in list above the <code>form</code> after submission.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html">3.3.1 Error Identification</a>
</p>
<p class="checklist-description">
This provides a way for assistive technology users to quickly have a high-level understanding of what issues are present in the form. This is especially important for larger forms with many inputs. Make sure that each reported error also has a link to the corresponding field with invalid input.
</p>
</div>
</details>
<details id="associate-input-error-messaging-with-the-input-it-corresponds-to">
<summary>
Associate input error messaging with the input it corresponds to.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html">3.3.1 Error Identification</a>
</p>
<p class="checklist-description">
Techniques such as <a href="https://developer.paciellogroup.com/blog/2018/09/describing-aria-describedby/">using <code>aria-describedby</code></a> allow people who use assistive technology to more easily understand the difference between the input and the error message associated with it.
</p>
</div>
</details>
<details id="make-sure-that-error-warning-and-success-states-are-not-visually-communicated-by-just-color">
<summary>
Make sure that error, warning, and success states are not visually communicated by just color.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">1.4.1 Use of Color</a>
</p>
<p class="checklist-description">
People who are color blind, who have other low vision conditions, or different cultural understandings for color may not see the state change, or understand what kind of feedback the state represents if color is the only indicator.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-media" aria-labelledby="label-media">
<h2 id="label-media">Media</h2>
<p>
Media includes content such as pre-recorded and live audio and video.
</p>
<div class="checklist">
<details id="make-sure-that-media-does-not-autoplay">
<summary>
Make sure that media does not autoplay.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-dis-audio.html">1.4.2 Audio Control</a>
</p>
<p class="checklist-description">
Unexpected video and audio can be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD. Certain kinds of autoplaying video and animation can be a trigger for vestibular and seizure disorders.
</p>
</div>
</details>
<details id="ensure-that-media-controls-use-appropriate-markup">
<summary>
Ensure that media controls use appropriate markup.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
</p>
<p class="checklist-description">
Examples include making sure an audio mute button has a pressed toggle state when active, or that a volume slider uses <code><input type="range"></code>.
</p>
</div>
</details>
<details id="check-to-see-that-all-media-can-be-paused">
<summary>
Check to see that all media can be paused.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html">2.1.1 Keyboard</a>
</p>
<p class="checklist-description">
Provide a global pause function on any media element. If the device has a keyboard, ensure that pressing the <kbd>Space</kbd> key can pause playback. Make sure you also don't interfere with the <kbd>Space</kbd> key's ability to scroll the page/view when not focusing on a form control.
</p>
</div>
</details>
</div>
<h3 id="video">Video</h3>
<div class="checklist">
<details id="confirm-the-presence-of-captions">
<summary>
Confirm the presence of captions.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">1.2.2 Captions</a>
</p>
<p class="checklist-description">
Captions allow a person who cannot hear the audio content of a video to still understand its content.
</p>
</div>
</details>
<details id="remove-seizure-triggers">
<summary>
Remove seizure triggers.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">2.3.1 Three Flashes or Below Threshold</a>
</p>
<p class="checklist-description">
Certain kinds of strobing or flashing animations will trigger seizures.
</p>
</div>
</details>
</div>
<h3 id="audio">Audio</h3>
<div class="checklist">
<details id="confirm-that-transcripts-are-available">
<summary>
Confirm that transcripts are available.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">1.1.1 Non-text Content</a>
</p>
<p class="checklist-description">
Transcripts allow people who cannot hear to still understand the audio content. It also allows people to digest audio content at a pace that is comfortable to them.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-appearance" aria-labelledby="label-appearance">
<h2 id="label-appearance">Appearance</h2>
<p>
How your site content looks in any given situation.
</p>
<div class="checklist">
<details id="check-your-content-in-specialized-browsing-modes">
<summary>
Check your content in specialized browsing modes.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">1.4.1 Use of Color</a>
</p>
<p class="checklist-description">
Activate modes such as <a href="https://support.microsoft.com/en-us/help/13862/windows-use-high-contrast-mode">Windows High Contrast</a> or <a href="https://9to5mac.com/2017/06/09/ios-11-dark-mode-smart-invert-colors-how-to-enable/">inverted colors</a>. Is your content still legible? Are your icons, borders, links, form fields, and other content still present? Can you distinguish foreground content from the background?
</p>
</div>
</details>
<details id="increase-text-size-to-200">
<summary>
Increase text size to 200%.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">1.4.4 Resize text</a>
</p>
<p class="checklist-description">
Is the content still readable? Does increasing the text size cause content to overlap?
</p>
</div>
</details>
<details id="double-check-that-good-proximity-between-content-is-maintained">
<summary>
Double-check that good proximity between content is maintained.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html">1.3.3 Sensory Characteristics</a>
</p>
<p class="checklist-description">
Use <a href="https://www.youtube.com/watch?v=S1j6CYT3kWA&feature=youtu.be">the straw test</a> to ensure people who depend on screen zoom software can still easily discover all content.
</p>
</div>
</details>
<details id="make-sure-color-isnt-the-only-way-information-is-conveyed">
<summary>
Make sure color isn't the only way information is conveyed.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">1.4.1 Use of Color</a>
</p>
<p class="checklist-description">
Can you still see where links are among body content if everything is grayscale?
</p>
</div>
</details>
<details id="use-a-simple-straightforward-and-consistent-layout">
<summary>
Use a simple, straightforward, and consistent layout.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">1.4.10 Reflow</a>
</p>
<p class="checklist-description">
A complicated layout can be confusing to understand and use.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-animation" aria-labelledby="label-animation">
<h2 id="label-animation">Animation</h2>
<p>
Content that moves, either on its own, or when triggered by a person activating a control.
</p>
<div class="checklist">
<details id="ensure-animations-are-subtle-and-not-do-not-flash-too-much">
<summary>
Ensure animations are subtle and not do not flash too much.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">2.3.1 Three Flashes or Below Threshold</a>
</p>
<p class="checklist-description">
Certain kinds of strobing or flashing animations will trigger seizures. Others may be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD.
</p>
</div>
</details>
<details id="provide-a-mechanism-to-pause-background-video">
<summary>
Provide a mechanism to pause background video.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">2.2.2 Pause, Stop, Hide</a>
</p>
<p class="checklist-description">
Background video can be distracting, especially if content is placed over it.
</p>
</div>
</details>
<details id="make-sure-all-animation-obeys-the-prefers-reduced-motion-media-query">
<summary>
Make sure all animation obeys the <code>prefers-reduced-motion</code> media query.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html">2.3.3 Animation from Interactions</a>
</p>
<p class="checklist-description">
Remove animations when the "reduce motion" setting is activated. If an animation is necessary to communicate meaning for a concept, slow its duration down.
</p>
</div>
</details>
</div>
</section>
<section class="article-section resources-section checklist-section" id="section-color-contrast" aria-labelledby="label-color-contrast">
<h2 id="label-color-contrast">Color contrast</h2>
<p>
<a href="/posts/what-is-color-contrast/">Color contrast</a> is how legible colors are when placed next to, and on top of each other.
</p>
<div class="checklist">
<details id="check-the-contrast-for-all-normal-sized-text">
<summary>
Check the contrast for all normal-sized text.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast</a>
</p>
<p class="checklist-description">
Level <strong>AA</strong> compliance requires a contrast ratio of <code>4.5:1</code>.
</p>
</div>
</details>
<details id="check-the-contrast-for-all-large-sized-text">
<summary>
Check the contrast for all large-sized text.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast</a>
</p>
<p class="checklist-description">
Level <strong>AA</strong> compliance requires a contrast ratio of <code>3:1</code>.
</p>
</div>
</details>
<details id="check-the-contrast-for-all-icons">
<summary>
Check the contrast for all icons.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="http://localhost:4000/AA%20requires%20contrast%20ratio%20of%203.0:1.">1.4.11 Non-text Contrast</a>
</p>
<p class="checklist-description">
Level <strong>AA</strong> compliance requires a contrast ratio of <code>3.0:1</code>.
</p>
</div>
</details>
<details id="check-the-contrast-of-borders-for-input-elements">
<summary>
Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.).
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>
</p>
<p class="checklist-description">
Level <strong>AA</strong> compliance requires a contrast ratio of <code>3.0:1</code>.
</p>
</div>
</details>
<details id="check-text-that-overlaps-images-or-video">
<summary>
Check text that overlaps images or video.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast</a>
</p>
<p class="checklist-description">
Is text still legible?
</p>
</div>
</details>
<details id="check-custom-selection-colors">
<summary>
Check custom <code>::selection</code> colors.
</summary>
<div class="checklist-details">
<p class="checklist-criterion">
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast</a>
</p>