-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathaccessibility-checklist.html
More file actions
976 lines (922 loc) · 41.3 KB
/
accessibility-checklist.html
File metadata and controls
976 lines (922 loc) · 41.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessibility checklist</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
</style>
<style>
html {
font-family: 'Inter';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
padding-bottom: 4rem;
max-width: 860px;
margin: 0 auto;
}
h2 {
color: #0D1219;
font-family: 'Poppins', sans-serif;
font-size: 1.75rem;
font-style: normal;
font-weight: 600;
line-height: 120%;
letter-spacing: -0.0025em;
margin: 0;
}
p {
color: #657892;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 160%;
margin: 0.5rem 0 2rem 0;
}
ul {
list-style: none;
padding: 0 0 2rem 0;
}
li {
margin: 1rem 0;
padding: 1rem;
position: relative;
}
li:hover {
background-color: #fafafa;
}
label {
align-items: center;
color: #3F4D62;
display: flex;
font-size: 1.125rem;
font-style: normal;
font-weight: 600;
gap: 0.75rem;
line-height: 160%;
min-height: 2.375rem;
padding: 0 2.375rem 0 0;
}
input[type="checkbox"] {
height: 1.25rem;
margin: 0;
width: 1.25rem;
flex-shrink: 0;
}
span.badge {
align-items: center;
background: #E7F1FF;
border-radius: 0.25rem;
color: #1A81FA;
display: flex;
font-size: 0.75rem;
font-style: normal;
font-weight: 600;
height: 1.75rem;
justify-content: center;
line-height: 170%;
margin: 0 0.5rem 0 auto;
padding: 0 0.5rem;
flex-shrink: 0;
}
span.badge.purple {
color: #800080;
background: #E6E6FA;
}
details {
color: #657892;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 170%;
padding-inline: 2rem;
}
details[open] {
margin: 0.25rem 0 0.5rem 0;
}
details[open] summary {
transform: rotate(180deg);
}
summary {
align-items: center;
display: flex;
color: #1A81FA;
font-size: 1.125rem;
height: 2.375rem;
inset: 0 0 auto auto;
justify-content: center;
position: absolute;
width: 2.375rem;
transition: 150ms;
}
button {
background: none;
border: 1px solid #1A81FA;
border-radius: 0.375rem;
color: #1A81FA;
font-size: 0.875rem;
font-style: normal;
font-weight: 600;
height: 2.375rem;
line-height: 170%;
margin: 0.5rem 0 0 0;
padding: 0 0.75rem;
}
.progress-footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
left: 0;
right: 0;
box-sizing: border-box;
background: white;
box-shadow: 0px 0px 16px rgba(0, 0, 0, .1);
}
#progress-indicator {
background-color: #eee;
height: 1.5rem;
width: 100%;
position: relative;
border-radius: 0.25rem;
}
#progress-indicator #progress-bar {
background-color: #007bff;
height: 100%;
width: 0;
position: absolute;
top: 0;
left: 0;
transition: 150ms ease-out;
}
#progress-indicator #progress-text {
position: absolute;
top: 0;
left: 0.25rem;
}
</style>
<style>
@media print {
html {
font-size: 13px;
}
#print-page,
#visibility-filter {
display: none;
}
li {
margin: 0;
padding: 0.5rem 1rem;
}
.progress-footer {
position: static;
}
}
</style>
</head>
<body>
<select id="visibility-filter">
<option value="all">Show All</option>
<option value="design">Design</option>
<option value="implementation">UI Implementation</option>
</select>
<button id="print-page">Print Checklist</button>
<h2>
Adaptable and responsive UI
</h2>
<p>Responsive techniques ensure the user interface can adapt to different screen sizes and resolutions. This is essential for users with low vision who may need to enlarge text to comfortably interact with digital interfaces.</p>
<ul>
<li class="design">
<label><input type="checkbox">App is usable on both landscape and portrait modes<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Ensure your app is usable in both landscape and portrait modes, providing adaptability for users who switch
between different device orientations.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/orientation.html">Understanding WCAG 1.3.4</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">App is usable on 320px viewport width<span class="badge">Design</span></label>
<details>
<summary>↓</summary>
Design your web content to be usable at a 320px viewport width, improving accessibility on smaller screens and
devices.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/reflow.html">Understanding WCAG 1.4.10</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">App scales down to 320px viewport width<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Design your web content to be usable at a 320px viewport width, improving accessibility on smaller screens and
devices.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/reflow.html">Understanding WCAG 1.4.10</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">App is usable on 200% zoom level. Use em and rem units instead of px to allow text
resizing.<span class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Allow users to zoom content to 200% without losing functionality or legibility, using em and rem units for text
sizing.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html">Understanding WCAG 1.4.4</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Users can increase text spacing<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Enable users to adjust text spacing for improved readability, accommodating various reading preferences and
accessibility needs.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/adjustable-spacing.html">Understanding WCAG 1.4.12</a>
</details>
</li>
</ul>
<h2>
Colour contrast
</h2>
<p>Proper contrast between text and background colors enhances legibility. This is especially important for users with color blindness or low vision.</p>
<ul>
<li class="design">
<label><input type="checkbox">Regular-sized text has contrast of 4.5:1<span class="badge">Design</span></label>
<details>
<summary>↓</summary>
Ensure text and images have sufficient contrast against their background, making content more readable and
accessible for all users, including those with visual impairments.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html">Understanding WCAG 1.4.3</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Large-sized text (24px+) has contrast of 3:1<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Ensure text and images have sufficient contrast against their background, making content more readable and
accessible for all users, including those with visual impairments.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html">Understanding WCAG 1.4.3</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Text over images or gradients have sufficient contrast<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Ensure text and images have sufficient contrast against their background, making content more readable and
accessible for all users, including those with visual impairments.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html">Understanding WCAG 1.4.3</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Hover and focus styles have contrast of 3:1<span class="badge">Design</span></label>
<details>
<summary>↓</summary>
Non-text content, such as graphical symbols and user interface components, should have sufficient contrast,
improving usability and comprehension for all users.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">Understanding WCAG 1.4.11</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Form field and button borders have contrast of 3:1<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Non-text content, such as graphical symbols and user interface components, should have sufficient contrast,
improving usability and comprehension for all users.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">Understanding WCAG 1.4.11</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Charts and other graphics have contrast of 3:1<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Non-text content, such as graphical symbols and user interface components, should have sufficient contrast,
improving usability and comprehension for all users.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">Understanding WCAG 1.4.11</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Icons have contrast of 3:1<span class="badge">Design</span></label>
<details>
<summary>↓</summary>
Non-text content, such as graphical symbols and user interface components, should have sufficient contrast,
improving usability and comprehension for all users.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">Understanding WCAG 1.4.11</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Test dark mode if allowed in the app<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Dark mode provides a visually comfortable alternative, particularly for users with sensitivity to bright
displays or those in low-light environments.
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Test "forced-colors:active" mode<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
This mode can be activated by users to override their color preferences, making it essential to verify that the
website remains usable and legible for all, including those with vision-related challenges.
</details>
</li>
</ul>
<h2>
Content structure
</h2>
<p>A well-structured HTML document provides a clear hierarchy of content. This enables screen readers and assistive technologies to interpret and convey information accurately to users with disabilities. Proper structure improves navigation, readability, and comprehension</p>
<ul>
<li class="design">
<label><input type="checkbox">Headings have a visual hierarchy<span class="badge">Design</span></label>
</li>
<li class="implementation">
<label><input type="checkbox">Headings are short and clear, accurately describing the following content<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Ensure clear, descriptive headings and labels for web content, aiding navigation and accessibility for users
with disabilities.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html">Understanding WCAG 2.4.6</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Each content group is labeled with a heading<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
For improved web accessibility, label each content group with a relevant heading, utilizing semantic HTML
elements like <section>. Note that using <section> and heading will introduce landmarks which should
be added with consideration.
</details>
</li>
<li class="implementation">
<label><input type="checkbox">App has one and only one H1 that describes the overall content or page<span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Every web page should have a clear and descriptive title that helps users understand its content, aiding
navigation and accessibility.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html">Understanding WCAG 2.4.2</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">View has a page title that describes the page. Format the <title> to be from
most specific to least specific. E.g. "Button | Components | Vaadin Docs"<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Every web page should have a clear and descriptive title that helps users understand its content, aiding
navigation and accessibility.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html">Understanding WCAG 2.4.2</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Heading levels <h1> to <h6> reflect the content hierarchy. Use
<span> if you need styled text instead.<span class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Structuring content with proper HTML semantics, providing meaningful relationships between elements, and
enhancing screen reader comprehension.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">Understanding WCAG 1.3.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Lists use <ul> or <ol> and <li> elements<span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Structuring content with proper HTML semantics, providing meaningful relationships between elements, and
enhancing screen reader comprehension.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">Understanding WCAG 1.3.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">View regions use semantic UI areas (ARIA landmark roles). Use <nav>,
<main>, <header>, <footer> or roles. Also needed when using Vaadin App Layout.<span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Structuring content with proper HTML semantics, providing meaningful relationships between elements, and
enhancing screen reader comprehension.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">Understanding WCAG 1.3.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Ensure icon-only buttons have an aria-label or tooltip<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Provide descriptive aria-labels or tooltips for icon-only buttons. This practice empowers users, especially
those with visual impairments, to understand the button's purpose and functionality, creating a more inclusive
user experience.
</details>
</li>
<li class="implementation">
<label><input type="checkbox">lang attribute reflects the UI language<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Specify the language of the web page to ensure proper pronunciation and display by assistive technologies,
improving content accessibility.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/language-of-page.html">Understanding WCAG 3.1.1</a>
</details>
</li>
</ul>
<h2>
Operability
</h2>
<p>Ensures that users with mobility impairments can navigate and interact with application effectively. By providing keyboard-friendly interfaces, applications become more inclusive and more efficient to use.</p>
<ul>
<li class="design">
<label><input type="checkbox">All tasks can be done using only a keyboard<span class="badge">Design</span></label>
<details>
<summary>↓</summary>
Ensure all functionality is operable by keyboard, allowing users who cannot use a mouse or touch input to
navigate and interact with web content.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html">Understanding WCAG 2.1.1</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Keyboard shortcuts don't interfere with input or OS/browser shortcuts<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Avoid using single character key shortcuts for functionality, as they may conflict with assistive
technology.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/character-key-shortcuts.html">Understanding WCAG 2.1.4</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Avoid content that appears on hover or focus<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
</details>
</li>
<li class="design">
<label><input type="checkbox">Provide alternative for drag & drop interactions. Avoid swiping<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Ensure that pointer gestures are not the sole means of interacting with content, providing alternatives for
users who cannot perform such gestures.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures.html">Understanding WCAG 2.5.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Focus order is intuitive and meaningful<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Maintain a logical and consistent order in which interactive elements receive focus, enhancing keyboard
navigation and screen reader usability.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html">Understanding WCAG 2.4.3</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Ensure keyboard focus is visible on all focusable items<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Ensure keyboard focus is clearly visible, helping users understand where they are navigating and interact
effectively with the content.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html">Understanding WCAG 2.4.7</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Ensure keyboard focus isn't trapped<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Avoid keyboard traps where users cannot navigate away from a component using a keyboard, promoting accessibility
and user control.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html">Understanding WCAG 2.1.2</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Ensure non-visible or disabled elements don't receive focus<span
class="badge purple">UI implementation</span></label>
</li>
<li class="implementation">
<label><input type="checkbox">Don't use positive tabindex values<span class="badge purple">UI
implementation</span></label>
</li>
<li class="implementation">
<label><input type="checkbox">Esc can be used to close dialogs, popups, notifications, etc.<span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Ensure that content triggered on hover or focus is dismissible or can be extended, preventing abrupt changes
that may disorient users.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html">Understanding WCAG
1.4.13</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Content doesn't automatically disappear when moving the pointer<span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Ensure that content triggered on hover or focus is dismissible or can be extended, preventing abrupt changes
that may disorient users.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html">Understanding WCAG
1.4.13</a>
</details>
</li>
</ul>
<h2>
Navigation & links
</h2>
<p>Proper navigation structure and the correct use of links help users to understand and navigate digital content efficiently. Clear and organized navigation ensures that users can find information easily, while descriptive and well-structured links provide context.</p>
<ul>
<li class="design">
<label><input type="checkbox">Links don't use only color<span class="badge">Design</span></label>
<details>
<summary>↓</summary>
Ensure that information isn't conveyed solely through color. Text and visual elements should remain
understandable and distinguishable even when color is not perceivable.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html">Understanding WCAG 1.4.1</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Indicate if link opens in a new window<span class="badge">Design</span></label>
</li>
<li class="implementation">
<label><input type="checkbox">Link text describes the link's destination. e.g. avoid "click here."<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Use descriptive text for links or ensure that the purpose of each link is clear from its context, aiding users
in understanding where the link will lead.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html">Understanding WCAG 2.4.4</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Button labels are brief, informative, rely on verbs and adjectives<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Use descriptive text for links or ensure that the purpose of each link is clear from its context, aiding users
in understanding where the link will lead.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html">Understanding WCAG 2.4.4</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Navigation menus have a consistent layout and order throughout the app<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Maintain a consistent and predictable navigation mechanism throughout the web content, enabling users to locate
and access information efficiently.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html">Understanding WCAG 3.2.3</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">User should be able to find content/views by not using the navigation. I.e. provide
universal search or sitemap.<span class="badge">Design</span></label>
<details>
<summary>↓</summary>
Offer multiple ways to find content, such as search options or navigation menus, improving accessibility and
user choice.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways.html">Understanding WCAG 2.4.5</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">RouterLinks or Anchors are used for navigation instead of Buttons<span
class="badge purple">UI implementation</span></label>
</li>
<li class="implementation">
<label><input type="checkbox">Make sure main content is easy to reach with the keyboard or provide a "skip to
content" link as the first focusable element<span class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Implement mechanisms for users to skip over repetitive or navigational content, improving the efficiency of
keyboard and screen reader navigation.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html">Understanding WCAG 2.4.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Make sure click and touch targets are at least 24px by 24px<span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Ensure that interactive elements have a sufficient target size to be easily selected, particularly for touch or
mobile device users, enhancing accessibility and usability.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size.html">Understanding WCAG 2.5.8</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">With multiple levels of navigation, give each an accessible name<span
class="badge purple">UI implementation</span></label>
</li>
</ul>
<h2>
Perceivable
</h2>
<p>Ensure all users can percieve the content.</p>
<ul>
<li class="design">
<label><input type="checkbox">Colour is not used as the only way to communicate important information<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Ensure that information isn't conveyed solely through color. Text and visual elements should remain
understandable and distinguishable even when color is not perceivable.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html">Understanding WCAG 1.4.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Don't use title attribute. Use tooltip component instead<span
class="badge purple">UI implementation</span></label>
</li>
</ul>
<h2>
Forms
</h2>
<p>Well-structured forms enhance user understanding and input accuracy, while clear labels and error notifications ensure a more inclusive and error-free experience.</p>
<ul>
<li class="design">
<label><input type="checkbox">Placeholders are not used as labels. Add aria-label if the visible label isn't
used<span class="badge">Design</span></label>
<details>
<summary>↓</summary>
Provide descriptive labels or instructions for form fields and controls, aiding users in understanding how to
complete forms and interact with content.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html">Understanding WCAG 3.3.2</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Error messages appear in relation to the form<span
class="badge">Design</span></label>
</li>
<li class="design">
<label><input type="checkbox">Each field has a label that is easy to understand<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Use clear, descriptive headings and labels to enhance content structure and comprehension.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html">Understanding WCAG 2.4.6</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Helper text is used if additional information is needed<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Provide descriptive labels or instructions for form fields and controls, aiding users in understanding how to
complete forms and interact with content.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html">Understanding WCAG 3.3.2</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Instructions related to the form are before the start of the form<span
class="badge">Design</span></label>
</li>
<li class="design">
<label><input type="checkbox">User can review the form entries before submitting<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Implement measures to prevent and correct user errors, especially in legal, financial, or data-related actions,
reducing the risk of costly mistakes.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/error-prevention-legal-financial-data.html">Understanding
WCAG 3.3.4</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Semantic field groups have a label. Each field has a label defined even if it's
visually hidden<span class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Create meaningful relationships and structure in content using semantic HTML elements, facilitating assistive
technology navigation and comprehension.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">Understanding WCAG 1.3.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Required fields are marked and use other than color as an indicator<span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Ensure that information isn't conveyed solely through color. Text and visual elements should remain
understandable and distinguishable even when color is not perceivable.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html">Understanding WCAG 1.4.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Error and validation messages are visible and noticeable<span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Ensure that information isn't conveyed solely through color. Text and visual elements should remain
understandable and distinguishable even when color is not perceivable.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html">Understanding WCAG 1.4.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Validation errors use easy-to-understand language<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Provide clear and meaningful error identification for users during form submission, enabling quick error
correction and a more user-friendly experience.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html">Understanding WCAG 3.3.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Error messages are specific and provide guidance to resolve the issue<span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Provide clear and meaningful error identification for users during form submission, enabling quick error
correction and a more user-friendly experience.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html">Understanding WCAG 3.3.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Forms have role="form". Search and filtering forms have role="search". Buttons
should be inside the section with a form role<span class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Create meaningful relationships and structure in content using semantic HTML elements, facilitating assistive
technology navigation and comprehension.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">Understanding WCAG 1.3.1</a>
</details>
</li>
</ul>
<h2>
Data tables
</h2>
<p>Clear structure and styling allow user to access and interpret tabular information efficiently. A well-structured data table, along with clear visual cues, ensures that content is organized and easily comprehensible.</p>
<ul>
<li class="design">
<label><input type="checkbox">Tables have a caption<span class="badge">Design</span></label>
<details>
<summary>↓</summary>
Create meaningful relationships and structure in content using semantic HTML elements, facilitating assistive
technology navigation and comprehension.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">Understanding WCAG 1.3.1</a>
</details>
</li>
<li class="design">
<label><input type="checkbox">Break complex tables into smaller simple tables, where possible<span
class="badge">Design</span></label>
</li>
<li class="design">
<label><input type="checkbox">Style table headers to be distinguishable from content cells<span
class="badge">Design</span></label>
</li>
<li class="design">
<label><input type="checkbox">Use row borders and/or row striping with sufficient spacing to help identify
rows<span class="badge">Design</span></label>
</li>
<li class="implementation">
<label><input type="checkbox">Make sure white space between table columns isn't excessive<span
class="badge purple">UI implementation</span></label>
</li>
<li class="implementation">
<label><input type="checkbox">Make sure tables are navigable with the keyboard<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Ensure all functionality can be operated via keyboard, making web content accessible to users who cannot use a
mouse or touch input.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html">Understanding WCAG 2.1.1</a>
</details>
</li>
</ul>
<h2>
Text styles
</h2>
<p>Good text styling enhances readability and comprehension of content.</p>
<ul>
<li class="design">
<label><input type="checkbox">Text formatting is not overused<span class="badge">Design</span></label>
</li>
<li class="design">
<label><input type="checkbox">Limit text lines to be shorter than 80 characters<span
class="badge">Design</span></label>
</li>
<li class="design">
<label><input type="checkbox">Left-align text. Avoid right-aligned, centered, or justified text<span
class="badge">Design</span></label>
</li>
<li class="implementation">
<label><input type="checkbox">Text is formatted with semantic elements like <strong> and <em><span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Create meaningful relationships and structure in content using semantic HTML elements, facilitating assistive
technology navigation and comprehension.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">Understanding WCAG 1.3.1</a>
</details>
</li>
</ul>
<h2>
Images
</h2>
<p>Proper semantics allow users with visual impairments to interpret visual content.</p>
<ul>
<li class="design">
<label><input type="checkbox">Graphics are not used to convey textual information<span
class="badge">Design</span></label>
<details>
<summary>↓</summary>
Avoid presenting text as images, as it can limit readability and accessibility for users who rely on screen
readers or text resizing.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html">Understanding WCAG 1.4.5</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Informative images have alt text<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Include text alternatives for non-text content, such as images and multimedia, making it accessible to users
with disabilities who may rely on screen readers or Braille displays.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html">Understanding WCAG 1.1.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">Icons are hidden from screen readers with aria-hidden="true"<span
class="badge purple">UI implementation</span></label>
<details>
<summary>↓</summary>
Include text alternatives for non-text content, such as images and multimedia, making it accessible to users
with disabilities who may rely on screen readers or Braille displays.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html">Understanding WCAG 1.1.1</a>
</details>
</li>
<li class="implementation">
<label><input type="checkbox">SVG elements have role="img" and aria-label<span class="badge purple">UI
implementation</span></label>
<details>
<summary>↓</summary>
Include text alternatives for non-text content, such as images and multimedia, making it accessible to users
with disabilities who may rely on screen readers or Braille displays.<br>
<a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html">Understanding WCAG 1.1.1</a>
</details>
</li>
</ul>
<div class="progress-footer">
<div id="progress-indicator">
<div id="progress-bar"></div> <!-- This div represents the progress bar -->
<div id="progress-text">Progress: 0%</div>
</div>
</div>
<script>
function updateProgress() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const checkedCheckboxes = Array.from(checkboxes).filter(checkbox => checkbox.checked);
const percentage = (checkedCheckboxes.length / checkboxes.length) * 100;
const progressBar = document.getElementById("progress-bar");
const progressText = document.getElementById("progress-text");
progressBar.style.width = percentage + "%";
progressText.textContent = `Progress: ` + checkedCheckboxes.length + " / " + checkboxes.length;
}
// Add event listeners to checkboxes to update progress on change
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener("change", updateProgress);
});
// Initial progress update
updateProgress();
</script>
<script>
// Get the select element
const visibilityFilter = document.getElementById("visibility-filter");
// Add an event listener to listen for changes in the select element
visibilityFilter.addEventListener("change", () => {
const selectedFilter = visibilityFilter.value; // Get the selected option
// Get all checklist items
const checklistItems = document.querySelectorAll("li");
// Loop through checklist items and hide/show them based on the selected filter
checklistItems.forEach(item => {
if (selectedFilter === "all") {
item.style.display = "list-item"; // Show all items
} else {
if (item.classList.contains(selectedFilter)) {
item.style.display = "list-item"; // Show items that belong to the selected group
} else {
item.style.display = "none"; // Hide items that don't belong to the selected group
}
}
});
});
</script>
<script>
document.getElementById("print-page").addEventListener("click", function () {
window.print();
});
</script>
</body>
</html>