forked from w3c/Mobile-A11y-TF-Note
-
Notifications
You must be signed in to change notification settings - Fork 0
/
MobileQuickRef.html
1520 lines (1357 loc) · 268 KB
/
MobileQuickRef.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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WCAG 2.0 Techniques that Apply to Mobile </title>
<link href="http://www.w3.org/WAI/wai-main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="controls">
<ul>
<li><a href="#skip" shape="rect"><img src="http://www.w3.org/Icons/downinpage.png" alt="" /> Skip to Content </a></li>
<li><a href="http://www.w3.org/WAI/changedesign.html" shape="rect"> | Change
text size or colors </a> </li>
</ul>
</div>
<div id="masthead">
<p id="logos"><a href="http://www.w3.org/" title="W3C Home" shape="rect"><img alt="W3C logo" src="http://www.w3.org/Icons/w3c_home" /></a><a href="http://www.w3.org/WAI/" title="WAI Home" shape="rect"><img alt="Web Accessibility initiative" src="http://www.w3.org/WAI/images/wai-temp" /></a></p>
</div>
<div id="tagline">
<p>WAI: Strategies, guidelines, resources to make the
Web accessible to people with disabilities</p>
</div>
<p><strong>Site Navigation: <a href="http://www.w3.org/">W3C Home</a> > <a href="http://www.w3.org/WAI/">WAI Home</a> > <a href="http://www.w3.org/WAI/GL/mobile-a11y-tf/">Mobile Accessibility Task Force</a></strong> </p>
<div id="skipwrapper"> <a id="skip" shape="rect">-</a></div><div class="head">
<h1><a name="title" id="title"> </a>WCAG 2.0 Techniques that Apply to Mobile </h1>
</div>
<p>Updated: 11 February, 2015</p>
<p><strong>NOTE:</strong> This information is intended as a temporary reference and may have been superseded; please check
<a href="http://www.w3.org/WAI/mobile/">WAI Mobile Accessibility Overview</a>
for the latest information. </p>
<h2>Introduction</h2>
<p>This list is a compilation of existing WCAG 2.0 Techniques that apply to mobile, as identified by the WAI Mobile Accessibility Task Force. It only includes existing techniques published by the WCAG Working Group. WAI expects this page to become obsolete when either: </p>
<ul>
<li>new mobile techniques are accepted as WCAG 2.0 Techniques</li>
<li><a href="http://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0</a> is updated with an option to filter for techniques that apply to mobile</li>
</ul>
<p>Since this list only provides existing WCAG Techniques, a more comprehensive coverage of relevant accessibility information for mobile developers also includes:</p>
<ul>
<li><a href="http://w3c.github.io/Mobile-A11y-TF-Note/">Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile</a> which includes information that may become approved WCAG 2.0 Techniques in the future. </li>
<li><a href="http://www.w3.org/TR/IMPLEMENTING-UAAG20/mobile.html">UAAG Mobile Examples</a> which provides guidance on the accessibility of the mobile user interface for developers of mobile HTML apps, hybrid apps, and native mobile apps. <br />
</li>
</ul>
<div id="about-techs"><h3>About the Techniques</h3><p><strong>For important information about the techniques, please see the <a href="http://www.w3.org/TR/2013/NOTE-UNDERSTANDING-WCAG20-20130905/understanding-techniques.html#understanding-techniques">Understanding Techniques for WCAG Success Criteria</a> section of Understanding WCAG 2.0.</strong></p><p class="note"><strong>Note: </strong>The basis for determining conformance to WCAG 2.0 is the success criteria, not the techniques. (The success criteria have 3-level numbering (0.0.0) and in this page they are followed by a link "Understanding Success Criterion".) All techniques are informative; that means they are not required. There may be <a href="http://www.w3.org/TR/2013/NOTE-UNDERSTANDING-WCAG20-20130905/understanding-techniques.html#ut-understanding-techniques-othertechs-head">other techniques</a> besides the ones listed here.</p></div>
<h2><a name="toc" id="toc"> </a>Table of Contents</h2><ul class="toc"><li>1.1 <a href="#text-equiv"><strong>Text Alternatives:</strong> Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.</a></li><li>1.2 <a href="#media-equiv"><strong>Time-based Media:</strong> Provide alternatives for time-based media.</a></li><li>1.3 <a href="#content-structure-separation"><strong>Adaptable:</strong> Create content that can be presented in different ways (for example simpler layout) without losing information or structure.</a></li><li>1.4 <a href="#visual-audio-contrast"><strong>Distinguishable:</strong>
Make it easier for users to see and hear content including separating foreground from background.
</a></li><li>2.1 <a href="#keyboard-operation"><strong>Keyboard Accessible:</strong>
Make all functionality available from a keyboard.
</a></li><li>2.2 <a href="#time-limits"><strong>Enough Time:</strong>
Provide users enough time to read and use content.
</a></li><li>2.3 <a href="#seizure"><strong>Seizures:</strong> Do not design content in a way that is known to cause seizures.</a></li><li>2.4 <a href="#navigation-mechanisms"><strong>Navigable:</strong>
Provide ways to help users navigate, find content, and determine where they are.
</a></li><li>3.1 <a href="#meaning"><strong>Readable:</strong>
Make text content readable and understandable.
</a></li><li>3.2 <a href="#consistent-behavior"><strong>Predictable:</strong>
Make Web pages appear and operate in predictable ways.
</a></li><li>3.3 <a href="#minimize-error"><strong>Input Assistance:</strong>
Help users avoid and correct mistakes.
</a></li><li>4.1 <a href="#ensure-compat"><strong>Compatible:</strong> Maximize compatibility with current and future user agents, including assistive technologies.</a></li></ul><div id="quickref" class="quickrefcontainer">
<h3 id="text-equiv" title="
Guideline 1.1 - Text Alternatives">Text Alternatives<span class="screenreader">:</span></h3><p class="guideline"><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#text-equiv">Guideline 1.1</a> Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.<a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html" class="GLlink">Understanding Guideline 1.1</a></p><div class="advisory"><h4 id="text-equiv-advisory">Advisory Techniques for Guideline 1.1</h4><ul><li><p>Providing sign language videos for audio-only files (future link)
</p></li></ul></div><div class="level1"><div align="right"><p class="showhidelink"><a href="#toc" title="Go to top of page">top of page</a></p></div><div class="normative" id="text-equiv-all"><h4 title="Success Criterion 1.1.1 - Non-text Content" class="sc">Non-text Content<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#text-equiv-all">1.1.1</a> All <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#non-text-contentdef" class="termref">non-text content</a> that is presented to the user has a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#text-altdef" class="termref">text alternative</a> that serves the equivalent purpose, except for the situations listed below.
<em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html" class="HTMlink">Understanding Success Criterion 1.1.1</a></p><ul><li><p>
<strong class="sc-handle">Controls, Input: </strong> If non-text content is a control or accepts user input, then it has a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#namedef" class="termref">name</a> that describes its purpose. (Refer to <em><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#ensure-compat">Guideline 4.1</a></em> for additional requirements for controls and content that accepts user input.)
</p></li><li><p>
<strong class="sc-handle">Time-Based Media: </strong> If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to <em><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#media-equiv">Guideline 1.2</a></em> for additional requirements for media.)
</p></li><li><p>
<strong class="sc-handle">Test: </strong> If non-text content is a test or exercise that would be invalid if presented in <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#textdef" class="termref">text</a>, then text alternatives at least provide descriptive identification of the non-text content.
</p></li><li><p>
<strong class="sc-handle">Sensory: </strong> If non-text content is primarily intended to create a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#sensoryexpdef" class="termref">specific sensory experience</a>, then text alternatives at least provide descriptive identification of the non-text content.
</p></li><li><p>
<strong class="sc-handle">
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#CAPTCHAdef" class="termref">CAPTCHA</a>: </strong>If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception
are provided to accommodate different disabilities.</p></li><li><p>
<strong class="sc-handle">Decoration, Formatting, Invisible: </strong>If non-text content is <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#puredecdef" class="termref">pure decoration</a>, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#atdef" class="termref">assistive technology</a>.</p></li></ul></div><div class="sufficient"><div class="boxed"><h5 id="text-equiv-all-sufficient-head">Sufficient Techniques for 1.1.1 - Non-text Content </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><div><h6 class="situation">Situation A: If a short description can serve the same purpose and present the same information as the non-text content:</h6><ol class="enumar"><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G94">G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content</a> using one of the following <strong><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#text-equiv-all-situation-a-shorttext">Short text alternative techniques for Situation A</a></strong>:</p></li></ol><p id="text-equiv-all-situation-a-shorttext"><strong>Short text alternative techniques for Situation A</strong>:</p><ul><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G196">G196: Using a text alternative on one item within a group of images that describes all items in the group</a></p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H2">H2: Combining adjacent image and text links for the same resource</a> (HTML)
</p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H37">H37: Using alt attributes on img elements</a> (HTML)
</p></li><li class="basehtmlbase"><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H86">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak</a> (HTML)
</li></ul></div><div><h6 class="situation">Situation B: If a short description can <strong>not</strong> serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram):</h6><ol class="enumar"><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G95">G95: Providing short text alternatives that provide a brief description of
the non-text content</a> using one of the following <strong><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#text-equiv-all-situation-b-shorttext">Short text alternative techniques for Situation B</a></strong>
<strong>AND</strong> one of the following <strong><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#text-equiv-all-situation-b-longtext">Long text alternative techniques for Situation B</a></strong>:</p></li></ol><p id="text-equiv-all-situation-b-shorttext"><strong>Short text alternative techniques for Situation B</strong>:</p><ul><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G196">G196: Using a text alternative on one item within a group of images that describes all items in the group</a></p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H2">H2: Combining adjacent image and text links for the same resource</a> (HTML)
</p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H37">H37: Using alt attributes on img elements</a> (HTML)
</p></li><li class="basehtmlbase"><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H86">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak</a> (HTML)
</li></ul><p id="text-equiv-all-situation-b-longtext"><strong>Long text alternative techniques for Situation B</strong>:</p><ul><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G73">G73: Providing a long description in another location with a link to it that
is immediately adjacent to the non-text content</a></p></li><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G74">G74: Providing a long description in text near the non-text content, with a
reference to the location of the long description in the short description</a></p></li></ul></div><div><h6 class="situation">Situation C: If non-text content is a control or accepts user input:</h6><ol class="enumar"><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G82">G82: Providing a text alternative that identifies the purpose of the non-text content</a> using one of the following <strong><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#text-equiv-all-situation-c-controls">Text alternative techniques for controls and input for Situation C</a></strong>:</p></li></ol><p id="text-equiv-all-situation-c-controls"><strong>Text alternative techniques for controls and input for Situation C</strong>:</p><ul><li class="basehtmlbase"><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H30">H30: Providing link text that describes the purpose of a link for anchor elements</a> (HTML)
</li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H36">H36: Using alt attributes on images used as submit buttons</a> (HTML)
</p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H44">H44: Using label elements to associate text labels with form controls</a> (HTML)
</p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H65">H65: Using the title attribute to identify form controls when the label element
cannot be used</a> (HTML)
</p></li></ul></div><div><h6 class="situation">Situation D: If non-text content is time-based media (including live video-only and live audio-only); a test or exercise that would be invalid if presented in text; or primarily intended to create a specific sensory experience:</h6><ol class="enumar"><li><p>Providing a descriptive label using one of the following <strong><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#text-equiv-all-situation-d-shorttext">Short text alternative techniques for Situation D</a></strong>:</p></li><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G68">G68: Providing a short text alternative that describes the purpose of live
audio-only and live video-only content</a> using one of the following <strong><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#text-equiv-all-situation-d-shorttext">Short text alternative techniques for Situation D</a></strong>:</p></li><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G100">G100: Providing a short text alternative which is the accepted name or a descriptive name of the non-text content</a> using one of the following <strong><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#text-equiv-all-situation-d-shorttext">Short text alternative techniques for Situation D</a></strong>:</p></li></ol><p id="text-equiv-all-situation-d-shorttext"><strong>Short text alternative techniques for Situation D</strong>:</p><ul><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G196">G196: Using a text alternative on one item within a group of images that describes all items in the group</a></p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H2">H2: Combining adjacent image and text links for the same resource</a> (HTML)
</p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H35">H35: Providing text alternatives on applet elements </a> (HTML)
</p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H37">H37: Using alt attributes on img elements</a> (HTML)
</p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H53">H53: Using the body of the object element</a> (HTML)
</p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H86">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak</a> (HTML)
</p></li></ul></div><div><h6 class="situation">Situation E: If non-text content is a CAPTCHA:</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G143">G143: Providing a text alternative that describes the purpose of the CAPTCHA</a>
<strong>AND</strong>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G144">G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality</a>
</p></li></ol></div><div><h6 class="situation">Situation F: If the non-text content should be ignored by assistive technology:</h6><ol class="enumar"><li><p>Implementing or marking the non-text content so that it will be ignored by assistive technology using one of the following <strong><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#text-equiv-all-situation-f-notrequired">Techniques to indicate that text alternatives are not required for Situation F</a></strong>:</p></li></ol><p id="text-equiv-all-situation-f-notrequired"><strong>Techniques to indicate that text alternatives are not required for Situation F</strong>:</p><ul><li class="basecssbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C9">C9: Using CSS to include decorative images</a> (CSS)
</p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H67">H67: Using null alt text and no title attribute on img elements for images that AT
should ignore</a> (HTML)
</p></li></ul></div></div></div><div class="advisory"><h5 id="text-equiv-all-tech-optional-head">Advisory Techniques for 1.1.1 - Non-text Content </h5><div><h6 class="situation">General Techniques for Informative Non-Text Content (Advisory)</h6><ul><li><p>Identifying informative non-text content (future link)</p></li><li><p>Keeping short descriptions short (future link)</p></li><li><p>Describing images that include text (future link)</p></li><li><p>Providing a longer description of the non-text content where only a descriptive label is required using a technology-specific technique (for an accessibility-supported content technology) for long description listed above (future link)</p></li><li><p>Providing different sizes for non-text content when it cannot have an equivalent accessible alternative (future link)</p></li><li><p>Using server-side scripts to resize images of text (future link)</p></li></ul></div><div><h6 class="situation">General Techniques for Live Non-Text Content (Advisory)</h6><ul><li><p>Linking to textual information that provides comparable information (e.g., for a traffic Webcam, a municipality could provide a link to the text traffic report.) (future link)</p></li></ul></div><div><h6 class="situation">General techniques to minimize the barrier of CAPTCHAs</h6><ul><li><p>Providing more than two modalities of CAPTCHAs (future link)</p></li><li><p>Providing access to a human customer service representative who can bypass CAPTCHA (future link)</p></li><li><p>Not requiring CAPTCHAs for authorized users (future link)</p></li></ul></div><div><h6 class="situation">HTML Techniques (Advisory)</h6><ul><li class="basehtmlbase">Writing for browsers that do not support frame (future link) </li><li><p>
Providing alternative content for iframe (future link)
</p></li><li class="basehtmlbase"><p>Providing redundant text links for client-side image maps (future link) </p></li></ul></div><div><div class="basecssbase"><h6 class="situation">CSS Techniques (Advisory)</h6></div><ul><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C18">C18: Using CSS margin and padding rules instead of spacer images for layout design</a> (CSS)
</p></li><li class="basebase">Displaying empty table cells (future link)</li></ul></div><div><div class="baseariabase"><h6 class="situation">WAI-ARIA Techniques (Advisory)</h6></div><ul><li class="basebase"><p>Using the ARIA presentation role to indicate elements are purely presentational (future link)
</p></li></ul></div>
<div><h6 class="situation">Metadata Techniques (Advisory)</h6><ul><li><p> Using metadata to associate text transcriptions with a video (future link) </p></li><li><p> Using metadata to associate text transcriptions with audio-only content (future link)</p><ul><li><p> EXAMPLE: Providing, in metadata, URI(s) that points to an audio description and a text transcript of a video. </p></li><li><p> EXAMPLE: Providing, in metadata, URI(s) that point to several text transcripts (English, French, Dutch) of an audio file. </p></li></ul></li></ul></div></div><div class="failures"><h5 id="text-equiv-all-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.1.1 - Non-text Content </h5><ul><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F3">F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey
important information</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F13">F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not
include information that is conveyed by color differences in the image</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F20">F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when
changes to non-text content occur</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F30">F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not
alternatives (e.g., filenames or placeholder text)</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F38">F38: Failure of Success Criterion 1.1.1 due to omitting the alt-attribute for non-text
content used for decorative purposes only in HTML</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F39">F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F65">F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type "image"</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F67">F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F71">F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F72">F72: Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative</a>
</p></li></ul></div></div><h3 id="media-equiv" title="
Guideline 1.2 - Time-based Media">Time-based Media<span class="screenreader">:</span></h3><p class="guideline"><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#media-equiv">Guideline 1.2</a> Provide alternatives for time-based media.<a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv.html" class="GLlink">Understanding Guideline 1.2</a></p><div class="level1"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" title="Go to top of page">top of page</a></p></div><div class="normative" id="media-equiv-av-only-alt"><h4 title="Success Criterion 1.2.1 - Audio-only and Video-only (Prerecorded)" class="sc">Audio-only and Video-only (Prerecorded)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#media-equiv-av-only-alt">1.2.1</a> For <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#prerecordeddef" class="termref">prerecorded</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#audio-onlydef" class="termref">audio-only</a> and prerecorded <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#video-onlydef" class="termref">video-only</a> media, the following are true, except when the audio or video is a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#multimedia-alt-textdef" class="termref">media alternative for text</a> and is clearly labeled as such: <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html" class="HTMlink">Understanding Success Criterion 1.2.1</a></p><ul><li><p><strong class="sc-handle">Prerecorded Audio-only: </strong>An <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#alt-time-based-mediadef" class="termref">alternative for time-based media</a> is provided that presents equivalent information for prerecorded audio-only content.</p></li><li><p><strong class="sc-handle">Prerecorded Video-only: </strong>Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.</p></li></ul></div><div class="sufficient"><div class="boxed"><h5 id="media-equiv-av-only-alt-sufficient-head">Sufficient Techniques for 1.2.1 - Audio-only and Video-only (Prerecorded) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><div><h6 class="situation">Situation A: If the content is prerecorded audio-only:</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G158">G158: Providing an alternative for time-based media for audio-only content</a>
</p></li></ol></div><div><h6 class="situation">Situation B: If the content is prerecorded video-only:</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G159">G159: Providing an alternative for time-based media for video-only content</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G166">G166: Providing audio that describes the important video content and describing it as such</a>
</p></li></ol></div></div></div><div class="advisory"><h5 id="media-equiv-av-only-alt-tech-optional-head">Advisory Techniques for 1.2.1 - Audio-only and Video-only (Prerecorded) </h5><ul><li><p>Providing a transcript of a live audio only presentation after the fact (future link)</p></li><li><p>Linking to textual information that provides comparable information (e.g., for a traffic Webcam, a municipality could provide a link to the text traffic report.) (future link)</p></li></ul></div><div class="failures"><h5 id="media-equiv-av-only-alt-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.2.1 - Audio-only and Video-only (Prerecorded) </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F30">F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not
alternatives (e.g., filenames or placeholder text)</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F67">F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" title="Go to top of page">top of page</a></p></div><div class="normative" id="media-equiv-captions"><h4 title="Success Criterion 1.2.2 - Captions (Prerecorded)" class="sc">Captions (Prerecorded)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#media-equiv-captions">1.2.2</a>
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#captionsdef" class="termref">Captions</a> are provided for all <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#prerecordeddef" class="termref">prerecorded</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#audiodef" class="termref">audio</a> content in <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#synchronizedmediadef" class="termref">synchronized media</a>, except when the media is a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#multimedia-alt-textdef" class="termref">media alternative for text</a> and is clearly labeled as such. <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html" class="HTMlink">Understanding Success Criterion 1.2.2</a></p></div><div class="sufficient"><div class="boxed"><h5 id="media-equiv-captions-sufficient-head">Sufficient Techniques for 1.2.2 - Captions (Prerecorded) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G93">G93: Providing open (always visible) captions</a>
</p></li><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G87">G87: Providing closed captions</a> using any readily available media format that has a video player that supports closed captioning
</p></li><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G87">G87: Providing closed captions</a> using any of the technology-specific techniques below
</p></li></ol></div></div><div class="advisory"><h5 id="media-equiv-captions-tech-optional-head">Advisory Techniques for 1.2.2 - Captions (Prerecorded) </h5><ul><li><p>
Providing a note saying "No sound is used in this clip" for video-only clips (future link)
</p></li></ul></div><div class="failures"><h5 id="media-equiv-captions-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.2.2 - Captions (Prerecorded) </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F8">F8: Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important
sound effects</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F75">F75: Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F74">F74: Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" title="Go to top of page">top of page</a></p></div><div class="normative" id="media-equiv-audio-desc"><h4 title="Success Criterion 1.2.3 - Audio Description or Media Alternative (Prerecorded)" class="sc">Audio Description or Media Alternative (Prerecorded)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#media-equiv-audio-desc">1.2.3</a>
An <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#alt-time-based-mediadef" class="termref">alternative for time-based media</a> or <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#audiodescdef" class="termref">audio description</a> of the <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#prerecordeddef" class="termref">prerecorded</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#videodef" class="termref">video</a> content is provided for <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#synchronizedmediadef" class="termref">synchronized media</a>, except when the media is a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#multimedia-alt-textdef" class="termref">media alternative for text</a> and is clearly labeled as such.
<em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html" class="HTMlink">Understanding Success Criterion 1.2.3</a></p></div><div class="sufficient"><div class="boxed"><h5 id="media-equiv-audio-desc-sufficient-head">Sufficient Techniques for 1.2.3 - Audio Description or Media Alternative (Prerecorded) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G69">G69: Providing an alternative for time based media</a> using one of the following techniques</p><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G58">G58: Placing a link to the alternative for time-based media immediately next to the non-text content</a>
</p></li></ul></li><li><p>Linking to the alternative for time-based media (HTML)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G78">G78: Providing a second, user-selectable, audio track that includes audio descriptions</a>
</p></li><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G173">G173: Providing a version of a movie with audio descriptions</a> using one of the following:</p><ul><li><p>Using any player that supports audio and video</p></li></ul></li><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G8">G8: Providing a movie with extended audio descriptions</a> using one of the following: </p><ul><li><p>Using any player that supports audio and video</p></li></ul></li><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G203">G203: Using a static text alternative to describe a talking head video</a></p></li></ol></div></div></div><div class="level2"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" title="Go to top of page">top of page</a></p></div><div class="normative" id="media-equiv-real-time-captions"><h4 title="Success Criterion 1.2.4 - Captions (Live)" class="sc">Captions (Live)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#media-equiv-real-time-captions">1.2.4</a>
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#captionsdef" class="termref">Captions</a> are provided for all <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#livedef" class="termref">live</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#audiodef" class="termref">audio</a> content in <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#synchronizedmediadef" class="termref">synchronized media</a>. <em>(Level AA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-real-time-captions.html" class="HTMlink">Understanding Success Criterion 1.2.4</a></p></div><div class="sufficient"><div class="boxed"><h5 id="media-equiv-real-time-captions-sufficient-head">Sufficient Techniques for 1.2.4 - Captions (Live) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G9">G9: Creating captions for live synchronized media</a>
<strong>AND</strong>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G93">G93: Providing open (always visible) captions</a>
</p></li><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G9">G9: Creating captions for live synchronized media</a> <strong>AND</strong> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G87">G87: Providing closed captions</a> using any readily available media format that has a video player that supports closed captioning
</p></li></ol><div class="note"><p class="prefix"><em>Note: </em>Captions may be generated using real-time text translation service.
</p></div></div></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-media-equiv-audio-desc-only" title="Go to top of page">top of page</a></p></div><div class="normative" id="media-equiv-audio-desc-only"><h4 title="Success Criterion 1.2.5 - Audio Description (Prerecorded)" class="sc">Audio Description (Prerecorded)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#media-equiv-audio-desc-only">1.2.5</a>
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#audiodescdef" class="termref">Audio description</a> is provided for all <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#prerecordeddef" class="termref">prerecorded</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#videodef" class="termref">video</a> content in <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#synchronizedmediadef" class="termref">synchronized media</a>.
<em>(Level AA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc-only.html" class="HTMlink">Understanding Success Criterion 1.2.5</a></p></div><div class="sufficient"><div class="boxed"><h5 id="media-equiv-audio-desc-only-sufficient-head">Sufficient Techniques for 1.2.5 - Audio Description (Prerecorded) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G78">G78: Providing a second, user-selectable, audio track that includes audio descriptions</a>
</p></li><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G173">G173: Providing a version of a movie with audio descriptions</a> using one of the following:</p><ul><li><p>Using any player that supports audio and video</p></li></ul></li><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G8">G8: Providing a movie with extended audio descriptions</a> using one of the following: </p><ul><li><p>Using any player that supports audio and video</p></li></ul></li><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G203">G203: Using a static text alternative to describe a talking head video</a></p></li></ol></div></div><div class="advisory"><h5 id="media-equiv-audio-desc-only-tech-optional-head">Advisory Techniques for 1.2.5 - Audio Description (Prerecorded) </h5><ul><li><p>Providing
audio description for live synchronized media (future link)
</p></li></ul></div></div><div class="level3"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" title="Go to top of page">top of page</a></p></div><div class="normative" id="media-equiv-sign"><h4 title="Success Criterion 1.2.6 - Sign Language (Prerecorded)" class="sc">Sign Language (Prerecorded)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#media-equiv-sign">1.2.6</a>
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#sign-languageinterpdef" class="termref">Sign language interpretation</a> is provided for all <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#prerecordeddef" class="termref">prerecorded</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#audiodef" class="termref">audio</a> content in <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#synchronizedmediadef" class="termref">synchronized media</a>.
<em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-sign.html" class="HTMlink">Understanding Success Criterion 1.2.6</a></p></div><div class="sufficient"><div class="boxed"><h5 id="media-equiv-sign-sufficient-head">Sufficient Techniques for 1.2.6 - Sign Language (Prerecorded) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G54">G54: Including a sign language interpreter in the video stream</a>
</p></li></ol></div></div><div class="advisory"><h5 id="media-equiv-sign-tech-optional-head">Advisory Techniques for 1.2.6 - Sign Language (Prerecorded) </h5><div><h6 class="situation">Metadata Techniques</h6><ul><li><p> Using metadata to associate sign language alternatives of a video to enable choice of sign language (future link)</p><ul><li><p>EXAMPLE: Providing, in metadata, URI(s) that point to several English sign language translations (ASL, SASL, BSL, Auslan, ISL, NZSL) of a Web page. </p></li></ul></li></ul></div></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" title="Go to top of page">top of page</a></p></div><div class="normative" id="media-equiv-extended-ad"><h4 title="Success Criterion 1.2.7 - Extended Audio Description (Prerecorded)" class="sc">Extended Audio Description (Prerecorded)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#media-equiv-extended-ad">1.2.7</a>
Where pauses in foreground audio are insufficient to allow <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#audiodescdef" class="termref">audio descriptions</a> to convey the sense of the video, <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#extended-addef" class="termref">extended audio description</a> is provided for all <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#prerecordeddef" class="termref">prerecorded</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#videodef" class="termref">video</a> content in <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#synchronizedmediadef" class="termref">synchronized media</a>. <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-extended-ad.html" class="HTMlink">Understanding Success Criterion 1.2.7</a></p></div><div class="sufficient"><div class="boxed"><h5 id="media-equiv-extended-ad-sufficient-head">Sufficient Techniques for 1.2.7 - Extended Audio Description (Prerecorded) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G8">G8: Providing a movie with extended audio descriptions</a> using one of the following: </p><ul><li><p>Using any player that supports audio and video</p></li></ul></li></ol></div></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" title="Go to top of page">top of page</a></p></div><div class="normative" id="media-equiv-text-doc"><h4 title="Success Criterion 1.2.8 - Media Alternative (Prerecorded)" class="sc">Media Alternative (Prerecorded)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#media-equiv-text-doc">1.2.8</a>
An <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#alt-time-based-mediadef" class="termref">alternative for time-based media</a> is provided for all <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#prerecordeddef" class="termref">prerecorded</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#synchronizedmediadef" class="termref">synchronized media</a> and for all prerecorded <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#video-onlydef" class="termref">video-only</a> media. <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-text-doc.html" class="HTMlink">Understanding Success Criterion 1.2.8</a></p></div><div class="sufficient"><div class="boxed"><h5 id="media-equiv-text-doc-sufficient-head">Sufficient Techniques for 1.2.8 - Media Alternative (Prerecorded) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><div><h6 class="situation">Situation A: If the content is prerecorded synchronized media:</h6><ol class="enumar"><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G69">G69: Providing an alternative for time based media</a> using one of the following techniques</p><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G58">G58: Placing a link to the alternative for time-based media immediately next to the non-text content</a>
</p></li></ul></li><li>
<p>Linking to the alternative for time-based media (HTML)</p></li></ol></div><div><h6 class="situation">Situation B: If the content is prerecorded video-only:</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G159">G159: Providing an alternative for time-based media for video-only content</a>
</p></li></ol></div></div></div><div class="advisory"><h5 id="media-equiv-text-doc-tech-optional-head">Advisory Techniques for 1.2.8 - Media Alternative (Prerecorded) </h5><ul><li class="basehtmlbase"><p>Providing a corrected script (future link)</p></li><li><p>Adding detail to audio description (future link)</p></li></ul></div><div class="failures"><h5 id="media-equiv-text-doc-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.2.8 - Media Alternative (Prerecorded) </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F74">F74: Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" title="Go to top of page">top of page</a></p></div><div class="normative" id="media-equiv-live-audio-only"><h4 title="Success Criterion 1.2.9 - Audio-only (Live)" class="sc">Audio-only (Live)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#media-equiv-live-audio-only">1.2.9</a> An <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#alt-time-based-mediadef" class="termref">alternative for time-based media</a> that presents equivalent information for <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#livedef" class="termref">live</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#audio-onlydef" class="termref">audio-only</a> content is provided.
<em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-live-audio-only.html" class="HTMlink">Understanding Success Criterion 1.2.9</a></p></div><div class="sufficient"><div class="boxed"><h5 id="media-equiv-live-audio-only-sufficient-head">Sufficient Techniques for 1.2.9 - Audio-only (Live) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G151">G151: Providing a link to a text transcript of a prepared statement or script if the script is followed</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G150">G150: Providing text based alternatives for live audio-only content</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G157">G157: Incorporating a live audio captioning service into a Web page</a>
</p></li></ol></div></div><div class="advisory"><h5 id="media-equiv-live-audio-only-tech-optional-head">Advisory Techniques for 1.2.9 - Audio-only (Live) </h5><ul><li><p> Using metadata to associate text transcriptions with audio-only content (future link)</p><div class="example"><p class="prefix"><em>Example: </em>Providing, in metadata, URI(s) that point to several text transcripts (English, French, Dutch) of an audio file.</p></div></li></ul></div></div><h3 id="content-structure-separation" title="
Guideline 1.3 - Adaptable">Adaptable<span class="screenreader">:</span></h3><p class="guideline"><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation">Guideline 1.3</a> Create content that can be presented in different ways (for example simpler layout) without losing information or structure.<a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation.html" class="GLlink">Understanding Guideline 1.3</a></p><div class="level1"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-content-structure-separation-programmatic" title="Go to top of page">top of page</a></p></div><div class="normative" id="content-structure-separation-programmatic"><h4 title="Success Criterion 1.3.1 - Info and Relationships" class="sc">Info and Relationships<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic">1.3.1</a> Information, <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#structuredef" class="termref">structure</a>,
and <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relationshipsdef" class="termref">relationships</a> conveyed through <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#presentationdef" class="termref">presentation</a> can be <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#programmaticallydetermineddef" class="termref">programmatically determined</a> or are available in text. <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" class="HTMlink">Understanding Success Criterion 1.3.1</a></p></div><div class="sufficient"><div class="boxed"><h5 id="content-structure-separation-programmatic-sufficient-head">Sufficient Techniques for 1.3.1 - Info and Relationships </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><div><h6 class="situation">Situation A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:</h6><ol class="enumar"><li class="basegeneralbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G115">G115: Using semantic elements to mark up structure</a>
<strong>AND</strong>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H49">H49: Using semantic markup to mark emphasized or special text</a> (HTML)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G117">G117: Using text to convey information that is conveyed by variations in presentation of text</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G140">G140: Separating information and structure from presentation to enable different presentations</a>
</p></li><li><p>Making information and relationships conveyed through presentation programmatically determinable using the following techniques:</p><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G138">G138: Using semantic markup whenever color cues are used</a>
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H51">H51: Using table markup to present tabular information</a> (HTML)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H39">H39: Using caption elements to associate data table captions with data tables</a> (HTML)
</p></li><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H63">H63: Using the scope attribute to associate header cells and data cells in data
tables</a> (HTML)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H43">H43: Using id and headers attributes to associate data cells with header cells in
data tables</a> (HTML)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H44">H44: Using label elements to associate text labels with form controls</a> (HTML)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H65">H65: Using the title attribute to identify form controls when the label element
cannot be used</a> (HTML)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H71">H71: Providing a description for groups of form controls using fieldset and legend
elements </a> (HTML)
</p></li><li class="basehtmlbase"><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H48">H48: Using ol, ul and dl for lists or groups of links</a> (HTML)
</li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H42">H42: Using h1-h6 to identify headings</a> (HTML)
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR21">SCR21: Using functions of the Document Object Model (DOM) to add content to a page</a> (Scripting)
</p></li></ul></li></ol></div><div><h6 class="situation"> Situation B: The technology in use does NOT provide the semantic structure to make the information and relationships conveyed through presentation programmatically determinable:</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G117">G117: Using text to convey information that is conveyed by variations in presentation of text</a>
</p></li><li><p>Making information and relationships conveyed through presentation programmatically determinable or available in text using the following techniques:</p><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/T1">T1: Using standard text formatting conventions for paragraphs</a> (Text)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/T2">T2: Using standard text formatting conventions for lists</a> (Text)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/T3">T3: Using standard text formatting conventions for headings</a> (Text)
</p></li></ul></li></ol></div></div></div><div class="advisory"><h5 id="content-structure-separation-programmatic-tech-optional-head">Advisory Techniques for 1.3.1 - Info and Relationships </h5><ul><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C22">C22: Using CSS to control visual presentation of text</a> (CSS)
</p></li><li class="basebase"><p>Using CSS rather than tables for page layout (future link)</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G162">G162: Positioning labels to maximize predictability of relationships</a>
</p></li><li class="baseariabase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/ARIA1">ARIA1: Using the aria-describedby property to provide a descriptive label for input controls</a> (ARIA)
</p></li><li class="baseariabase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/ARIA2">ARIA2: Identifying required fields with the aria-required property</a> (ARIA)
</p></li><li><p>Providing
labels for all form controls that do not have implicit labels (future link)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G141">G141: Organizing a page using headings</a>
</p></li></ul></div><div class="failures"><h5 id="content-structure-separation-programmatic-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.3.1 - Info and Relationships </h5><ul><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F2">F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F17">F17: Failure of Success Criterion 1.3.1 and 4.1.1 due to insufficient information in DOM to determine
one-to-one relationships (e.g., between labels with same id) in HTML</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F33">F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
create multiple columns in plain text content</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F34">F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
format tables in plain text content</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F42">F42: Failure of Success Criterion 1.3.1 and 2.1.1 due to using scripting events to emulate links in a way that is not programmatically determinable</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F43">F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does
not represent relationships in the content</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F46">F46: Failure of Success Criterion 1.3.1 due to using th elements,
caption elements, or non-empty summary attributes in
layout tables</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F48">F48: Failure of Success Criterion 1.3.1 due to using the pre element to markup
tabular information</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F62">F62: Failure of Success Criterion 1.3.1 and 4.1.1 due to insufficient information in DOM to determine
specific relationships in XML</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F68">F68: Failure of Success Criterion 1.3.1 and 4.1.2 due to the association of label and user interface controls not being programmatically determinable</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F87">F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS</a>
</p></li><li class="basefailurebase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F90">F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes</a></p></li><li class="basefailurebase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F91">F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers</a></p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-content-structure-separation-sequence" title="Go to top of page">top of page</a></p></div><div class="normative" id="content-structure-separation-sequence"><h4 title="Success Criterion 1.3.2 - Meaningful Sequence" class="sc">Meaningful Sequence<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#content-structure-separation-sequence">1.3.2</a> When the sequence in which content is presented affects its meaning, a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#correct-reading-sequencedef" class="termref">correct reading sequence</a> can be <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#programmaticallydetermineddef" class="termref">programmatically determined</a>. <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" class="HTMlink">Understanding Success Criterion 1.3.2</a></p></div><div class="sufficient"><div class="boxed"><h5 id="content-structure-separation-sequence-sufficient-head">Sufficient Techniques for 1.3.2 - Meaningful Sequence </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G57">G57: Ordering the content in a meaningful sequence</a> for all the content in the Web page
</p></li><li><p>Marking sequences in the content as meaningful using one of the following techniques <strong>AND</strong> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G57">G57: Ordering the content in a meaningful sequence</a> for those sequences </p><ul><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C6">C6: Positioning content based on structural markup</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C8">C8: Using CSS letter-spacing to control spacing within a word</a> (CSS)
</p></li></ul></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C27">C27: Making the DOM order match the visual order</a> (CSS)
</p></li></ol></div></div><div class="advisory"><h5 id="content-structure-separation-sequence-tech-optional-head">Advisory Techniques for 1.3.2 - Meaningful Sequence </h5><ul><li><p>Using left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-left (future link)
</p></li><li><p>
Providing a link to linearized rendering (future link)
</p></li><li><p>
Providing a style switcher between style sheets that affect presentation order (future link)
</p></li></ul></div><div class="failures"><h5 id="content-structure-separation-sequence-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.3.2 - Meaningful Sequence </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F34">F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
format tables in plain text content</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F33">F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
create multiple columns in plain text content</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F32">F32: Failure of Success Criterion 1.3.2 due to using white space characters to control
spacing within a word</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F49">F49:
Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized </a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F1">F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by
positioning information with CSS</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-content-structure-separation-understanding" title="Go to top of page">top of page</a></p></div><div class="normative" id="content-structure-separation-understanding"><h4 title="Success Criterion 1.3.3 - Sensory Characteristics" class="sc">Sensory Characteristics<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#content-structure-separation-understanding">1.3.3</a>
Instructions provided for understanding
and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
<em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html" class="HTMlink">Understanding Success Criterion 1.3.3</a></p><div class="note"><p class="prefix"><em>Note: </em>For requirements related to color, refer to <em><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#visual-audio-contrast">Guideline 1.4</a></em>.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="content-structure-separation-understanding-sufficient-head">Sufficient Techniques for 1.3.3 - Sensory Characteristics </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G96">G96: Providing textual identification of items that otherwise rely only on sensory information to be understood</a>
</p></li></ol></div></div><div class="advisory"><h5 id="content-structure-separation-understanding-tech-optional-head">Advisory Techniques for 1.3.3 - Sensory Characteristics </h5><ul><li><p>Using an image with a text alternative for graphical symbols instead of a Unicode font glyph with the desired graphical appearance but different meaning (future link)
</p></li></ul></div><div class="failures"><h5 id="content-structure-separation-understanding-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.3.3 - Sensory Characteristics </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F14">F14: Failure of Success Criterion 1.3.3 due to identifying content only by its shape or
location</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F26">F26:
Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information</a>
</p></li></ul></div></div><h3 id="visual-audio-contrast" title="
Guideline 1.4 - Distinguishable">Distinguishable<span class="screenreader">:</span></h3><p class="guideline"><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast">Guideline 1.4</a>
Make it easier for users to see and hear content including separating foreground from background.
<a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast.html" class="GLlink">Understanding Guideline 1.4</a></p><div class="advisory"><h4 id="visual-audio-contrast-advisory">Advisory Techniques for Guideline 1.4</h4><ul><li><p>Using readable fonts (future link)</p></li><li><p>Making sure any text in images of text is at least 14 points and has good contrast (future link)
</p></li><li><p>Providing a highly visible highlighting mechanism for links or controls when they receive keyboard focus (future link)
</p></li></ul></div><div class="level1"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-visual-audio-contrast-without-color" title="Go to top of page">top of page</a></p></div><div class="normative" id="visual-audio-contrast-without-color"><h4 title="Success Criterion 1.4.1 - Use of Color" class="sc">Use of Color<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-without-color">1.4.1</a>
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
<em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="HTMlink">Understanding Success Criterion 1.4.1</a></p><div class="note"><p class="prefix"><em>Note: </em>This success criterion addresses color perception specifically. Other forms of perception are covered in <em><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#content-structure-separation">Guideline 1.3</a></em> including programmatic access to color and other visual presentation coding.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="visual-audio-contrast-without-color-sufficient-head">Sufficient Techniques for 1.4.1 - Use of Color </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><div><h6 class="situation">Situation A: If the color of particular words, backgrounds, or other content is used to indicate information:</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G14">G14: Ensuring that information conveyed by color differences is also available in text</a>
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H92">H92: Including a text cue for colored form control labels</a> (HTML)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G182">G182: Ensuring that additional visual cues are available when text color differences are used to convey information</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G183">G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them</a>
</p></li></ol></div><div><h6 class="situation">Situation B: If color is used within an image to convey information:</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G111">G111: Using color and pattern</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G14">G14: Ensuring that information conveyed by color differences is also available in text</a>
</p></li></ol></div></div></div><div class="advisory"><h5 id="visual-audio-contrast-without-color-tech-optional-head">Advisory Techniques for 1.4.1 - Use of Color </h5><ul><li><p>
Conveying information redundantly using color (future link)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C15">C15: Using CSS to change the presentation of a user interface component when it receives focus</a> (CSS)
</p></li></ul></div><div class="failures"><h5 id="visual-audio-contrast-without-color-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.4.1 - Use of Color </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F13">F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not
include information that is conveyed by color differences in the image</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F73">F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F81">F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-visual-audio-contrast-dis-audio" title="Go to top of page">top of page</a></p></div><div class="normative" id="visual-audio-contrast-dis-audio"><h4 title="Success Criterion 1.4.2 - Audio Control" class="sc">Audio Control<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-dis-audio">1.4.2</a>
If any audio on a Web page plays automatically for more than 3 seconds, either a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#mechanismdef" class="termref">mechanism</a> is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-dis-audio.html" class="HTMlink">Understanding Success Criterion 1.4.2</a></p><div class="note"><p class="prefix"><em>Note: </em>Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether or not it is used to meet other success criteria) must meet this success criterion. See <em><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#cc5">Conformance Requirement 5: Non-Interference</a></em>.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="visual-audio-contrast-dis-audio-sufficient-head">Sufficient Techniques for 1.4.2 - Audio Control </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G60">G60: Playing a sound that turns off automatically within three seconds</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G170">G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G171">G171: Playing sounds only on user request</a>
</p></li></ol></div></div><div class="advisory"><h5 id="visual-audio-contrast-dis-audio-tech-optional-head">Advisory Techniques for 1.4.2 - Audio Control </h5><ul><li><p>
Providing a site-wide preference to turn off audio in addition to providing a control near the top of the Web page that turns off sounds that play automatically (future link)
</p></li></ul></div><div class="failures"><h5 id="visual-audio-contrast-dis-audio-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.4.2 - Audio Control </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F23">F23: Failure of 1.4.2 due to playing a sound longer than 3 seconds where
there is no mechanism to turn it off</a>
</p></li></ul></div></div><div class="level2"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-visual-audio-contrast-contrast" title="Go to top of page">top of page</a></p></div><div class="normative" id="visual-audio-contrast-contrast"><h4 title="Success Criterion 1.4.3 - Contrast (Minimum)" class="sc">Contrast (Minimum)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">1.4.3</a>
<span>The visual presentation of </span><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#textdef" class="termref">text</a> and <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#images-of-textdef" class="termref">images of text</a> has a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef" class="termref">contrast ratio</a> of at least 4.5:1, except for the following:
<em>(Level AA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" class="HTMlink">Understanding Success Criterion 1.4.3</a></p><ul><li><p>
<strong class="sc-handle">Large Text: </strong>
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#larger-scaledef" class="termref">Large-scale</a> text and images of large-scale text have a contrast ratio of at least 3:1;</p></li><li><p>
<strong class="sc-handle">Incidental: </strong> Text or images of text that are part of an inactive <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#user-interface-componentdef" class="termref">user interface component</a>, that are <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#puredecdef" class="termref">pure decoration</a>, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.</p></li><li><p>
<strong class="sc-handle">Logotypes: </strong>
Text that is part of a logo or brand name has no minimum contrast requirement.</p></li></ul></div><div class="sufficient"><div class="boxed"><h5 id="visual-audio-contrast-contrast-sufficient-head">Sufficient Techniques for 1.4.3 - Contrast (Minimum) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><div><h6 class="situation">Situation A: text is less than 18 point if not bold and less than 14 point if bold</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18">G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text)
and background behind the text</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G148">G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G174">G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</a>
</p></li></ol></div><div><h6 class="situation">Situation B: text is at least 18 point if not bold and at least 14 point if bold</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G145">G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text)
and background behind the text</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G148">G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G174">G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</a>
</p></li></ol></div></div></div><div class="advisory"><h5 id="visual-audio-contrast-contrast-tech-optional-head">Advisory Techniques for 1.4.3 - Contrast (Minimum) </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G156">G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text</a>
</p></li><li><p>
Using a higher contrast value for text that is over a patterned background (future link)
</p></li><li><p>Using Unicode text and style sheets instead of images of text (future link)
</p></li><li><p>Using a higher contrast values for lines in diagrams (future link)</p></li><li><p>Using greater contrast level for red-black text/background combinations (future link)</p></li><li><p>Using colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark</p></li><li><p>Using a light pastel background rather than a white background behind black text to create sufficient but not extreme contrast (future link)</p></li><li><p>Making icons using simple line drawings that meet the contrast provisions for text (future link)
</p></li><li><p>Providing sufficient color contrast in graphs and charts (future link)
</p></li><li><p>Using a 3:1 contrast ratio or higher as the default presentation (future link) </p></li><li><p>Providing sufficient color contrast for empty text fields (future link) </p></li></ul></div><div class="failures"><h5 id="visual-audio-contrast-contrast-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.4.3 - Contrast (Minimum) </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F24">F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without
specifying background colors or vice versa</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F83">F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-visual-audio-contrast-scale" title="Go to top of page">top of page</a></p></div><div class="normative" id="visual-audio-contrast-scale"><h4 title="Success Criterion 1.4.4 - Resize text" class="sc">Resize text<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-scale">1.4.4</a>
Except for <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#captionsdef" class="termref">captions</a> and <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#images-of-textdef" class="termref">images of text</a>, <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#textdef" class="termref">text</a> can be resized without <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#atdef" class="termref">assistive technology</a> up to 200 percent without loss of content or functionality.
<em>(Level AA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" class="HTMlink">Understanding Success Criterion 1.4.4</a></p></div><div class="sufficient"><div class="boxed"><h5 id="visual-audio-contrast-scale-sufficient-head">Sufficient Techniques for 1.4.4 - Resize text </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G142">G142: Using a technology that has commonly-available user agents that support zoom</a>
</p></li><li><p>
Ensuring that text containers resize when the text resizes <strong>AND</strong> using measurements that are relative to other measurements in the content by using one or more of the following techniques:</p><ul><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C28">C28: Specifying the size of text containers using em units</a> (CSS)
</p></li><li class="basebase"><p>Techniques for relative measurements</p><ul><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C12">C12: Using percent for font sizes</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C13">C13: Using named font sizes</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C14">C14: Using em units for font sizes</a> (CSS)
</p></li></ul></li><li><p>Techniques for text container resizing</p><ul><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR34">SCR34: Calculating size and position in a way that scales with text size</a> (Scripting)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G146">G146: Using liquid layout</a>
</p></li></ul></li></ul></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G178">G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G179">G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width</a>
</p></li></ol></div></div><div class="advisory"><h5 id="visual-audio-contrast-scale-tech-optional-head">Advisory Techniques for 1.4.4 - Resize text </h5><ul><li><p>Providing large fonts by default (future link)</p></li><li><p>Using page-percent for container sizes (future link)</p></li><li><p>Avoiding scaling font sizes smaller than the user-agent default (future link)</p><div class="note"><p class="prefix"><em>Note: </em>The author won't actually know the font size, but should avoid percentage scaling that results in less than 100%</p></div></li><li><p>Avoiding justified text (future link)</p></li><li><p>Providing sufficient inter-line and inter-column spacing (future link)</p></li><li><p>Providing different sizes for non-text content when it cannot have an equivalent accessible alternative (future link)
</p></li><li><p>Avoiding the use of text in raster images (future link)
</p></li><li><p>Using server-side scripts to resize images of text (future link)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C17">C17: Scaling form elements which contain text</a> (CSS)
</p></li><li><p>Ensuring that text in raster images is at least 18pt (future link)
</p></li><li><p>Scaling text down to 50% (future link)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C20">C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C22">C22: Using CSS to control visual presentation of text</a> (CSS)
</p></li><li><p>Providing a mechanism to allow captions to be enlarged (future link)</p></li></ul></div><div class="failures"><h5 id="visual-audio-contrast-scale-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.4.4 - Resize text </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F69">F69: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F80">F80: Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-visual-audio-contrast-text-presentation" title="Go to top of page">top of page</a></p></div><div class="normative" id="visual-audio-contrast-text-presentation"><h4 title="Success Criterion 1.4.5 - Images of Text" class="sc">Images of Text<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-text-presentation">1.4.5</a> If the technologies being used can achieve the visual presentation, <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#textdef" class="termref">text</a> is used to convey information rather than <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#images-of-textdef" class="termref">images of text</a> except for the following:
<em>(Level AA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html" class="HTMlink">Understanding Success Criterion 1.4.5</a></p><ul><li><p>
<strong>Customizable:</strong> The image of text can be <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visually-customizeddef" class="termref">visually customized</a> to the user's requirements;</p></li><li><p>
<strong>Essential:</strong> A particular presentation of text is <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#essentialdef" class="termref">essential</a> to the information being conveyed.</p></li></ul><div class="note"><p class="prefix"><em>Note: </em>Logotypes (text that is part of a logo or brand name) are considered essential.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="visual-audio-contrast-text-presentation-sufficient-head">Sufficient Techniques for 1.4.5 - Images of Text </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C22">C22: Using CSS to control visual presentation of text</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C30">C30: Using CSS to replace text with images of text and providing user interface controls to switch</a> (CSS)
</p></li></ol></div></div><div class="advisory"><h5 id="visual-audio-contrast-text-presentation-tech-optional-head">Advisory Techniques for 1.4.5 - Images of Text </h5><div><h6 class="situation">General techniques for non-text content</h6><ol class="enumar"><li><p>Identifying informative non-text content (future link)</p></li></ol></div><div><h6 class="situation">CSS Techniques</h6><ol class="enumar"><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C12">C12: Using percent for font sizes</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C13">C13: Using named font sizes</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C14">C14: Using em units for font sizes</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C8">C8: Using CSS letter-spacing to control spacing within a word</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C6">C6: Positioning content based on structural markup</a> (CSS)
</p></li><li><p>Avoid applying text styling to text characters within a word (future link)</p></li></ol></div></div></div><div class="level3"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-visual-audio-contrast7" title="Go to top of page">top of page</a></p></div><div class="normative" id="visual-audio-contrast7"><h4 title="Success Criterion 1.4.6 - Contrast (Enhanced)" class="sc">Contrast (Enhanced)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast7">1.4.6</a>
<span>The visual presentation of </span><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#textdef" class="termref">text</a> and <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#images-of-textdef" class="termref">images of text</a> has a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef" class="termref">contrast ratio</a> of at least 7:1, except for the following:
<em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html" class="HTMlink">Understanding Success Criterion 1.4.6</a></p><ul><li><p>
<strong class="sc-handle">Large Text: </strong>
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#larger-scaledef" class="termref">Large-scale</a> text and images of large-scale text have a contrast ratio of at least 4.5:1;</p></li><li><p>
<strong class="sc-handle">Incidental: </strong> Text or images of text that are part of an inactive <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#user-interface-componentdef" class="termref">user interface component</a>, that are <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#puredecdef" class="termref">pure decoration</a>, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.</p></li><li><p>
<strong class="sc-handle">Logotypes: </strong>
Text that is part of a logo or brand name has no minimum contrast requirement.</p></li></ul></div><div class="sufficient"><div class="boxed"><h5 id="visual-audio-contrast7-sufficient-head">Sufficient Techniques for 1.4.6 - Contrast (Enhanced) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><div><h6 class="situation">Situation A: text is less than 18 point if not bold and less than 14 point if bold</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G17">G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text)
and background behind the text</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G148">G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G174">G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</a>
</p></li></ol></div><div><h6 class="situation">Situation B: text is as least 18 point if not bold and at least 14 point if bold</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18">G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text)
and background behind the text</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G148">G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G174">G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</a>
</p></li></ol></div></div></div><div class="advisory"><h5 id="visual-audio-contrast7-tech-optional-head">Advisory Techniques for 1.4.6 - Contrast (Enhanced) </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G156">G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text</a>
</p></li><li><p>
Using a higher contrast value for text that is over a patterned background (future link)
</p></li><li><p>Using Unicode text and style sheets instead of images of text (future link)
</p></li><li><p>Using a higher contrast values for lines in diagrams (future link)</p></li><li><p>Using greater contrast level for red-black text/background combinations (future link)</p></li><li><p>Using colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark (future link)</p></li><li><p>Using a light pastel background rather than a white background behind black text to create sufficient but not extreme contrast (future link)</p></li><li><p>Making icons using simple line drawings that meet the contrast provisions for text (future link)
</p></li><li><p>Providing sufficient color contrast in graphs and charts (future link)
</p></li><li><p>Using a 3:1 contrast ratio or higher as the default presentation (future link) </p></li><li><p>Providing sufficient color contrast for empty text fields (future link) </p></li></ul></div><div class="failures"><h5 id="visual-audio-contrast7-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.4.6 - Contrast (Enhanced) </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F24">F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without
specifying background colors or vice versa</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F83">F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-visual-audio-contrast-noaudio" title="Go to top of page">top of page</a></p></div><div class="normative" id="visual-audio-contrast-noaudio"><h4 title="Success Criterion 1.4.7 - Low or No Background Audio" class="sc">Low or No Background Audio<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-noaudio">1.4.7</a> For <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#prerecordeddef" class="termref">prerecorded</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#audio-onlydef" class="termref">audio-only</a> content that (1) contains primarily speech in the foreground, (2) is not an audio <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#CAPTCHAdef" class="termref">CAPTCHA</a> or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true: <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-noaudio.html" class="HTMlink">Understanding Success Criterion 1.4.7</a></p><ul><li><p><strong class="sc-handle">No Background: </strong>The audio does not contain background sounds.</p></li><li><p><strong class="sc-handle">Turn Off: </strong>The background sounds can be turned off.</p></li><li><p><strong class="sc-handle">20 dB: </strong> The background sounds are at least 20 decibels lower than the
foreground speech content, with the exception of occasional sounds that last for only one or two seconds.</p><div class="note"><p class="prefix"><em>Note: </em>Per the definition of "decibel," background sound that meets this requirement will be approximately four times quieter than the foreground speech content. </p></div></li></ul></div><div class="sufficient"><div class="boxed"><h5 id="visual-audio-contrast-noaudio-sufficient-head">Sufficient Techniques for 1.4.7 - Low or No Background Audio </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G56">G56: Mixing audio files so that non-speech sounds are at least 20 decibels
lower than the speech audio content</a>
</p></li></ol></div></div><div class="advisory"><h5 id="visual-audio-contrast-noaudio-tech-optional-head">Advisory Techniques for 1.4.7 - Low or No Background Audio </h5><ul><li><p>
Providing a way for users to adjust auditory levels of foreground and background sound independently (future link)
</p></li><li><p>Providing an audio track for synchronized media that includes background sounds that are at least 20 decibels lower than speech (future link)</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-visual-audio-contrast-visual-presentation" title="Go to top of page">top of page</a></p></div><div class="normative" id="visual-audio-contrast-visual-presentation"><h4 title="Success Criterion 1.4.8 - Visual Presentation" class="sc">Visual Presentation<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-visual-presentation">1.4.8</a> For the visual presentation of <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#blockstextdef" class="termref">blocks of text</a>, a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#mechanismdef" class="termref">mechanism</a> is available to achieve the following: <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" class="HTMlink">Understanding Success Criterion 1.4.8</a></p><ol class="enumar"><li><p>Foreground and background colors can be selected by the user.</p></li><li><p>Width is no more than 80 characters or glyphs (40 if <acronym title="Chinese, Japanese and Korean">CJK</acronym>).</p></li><li><p>Text is not justified (aligned to both the left and the right margins).</p></li><li><p>Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.</p></li><li><p>Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#fullscreenwindowdef" class="termref">on a full-screen window</a>.</p></li></ol></div><div class="sufficient"><div class="boxed"><h5 id="visual-audio-contrast-visual-presentation-sufficient-head">Sufficient Techniques for 1.4.8 - Visual Presentation </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><p><strong>Instructions: </strong> Since this is a multi-part success criterion, you must satisfy one of the numbered items for each of the requirements below. </p><div><h6 class="situation">First Requirement: Techniques to ensure foreground and background colors can be selected by the user</h6><ol class="enumar"><li class="basecssbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C23">C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content</a> (CSS)
OR </p></li><li class="basecssbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C25">C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors</a> (CSS)
OR </p></li><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G156">G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text</a> OR </p></li><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G148">G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults</a> OR </p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G175">G175: Providing a multi color selection tool on the page for foreground and background colors</a>
</p></li></ol></div><div><h6 class="situation">Second Requirement: Techniques to ensure width is no more than 80 characters or glyphs (40 if CJK)</h6><ol class="enumar"><li class="basehtmlbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H87">H87: Not interfering with the user agent's reflow of text as the viewing window is narrowed</a> (HTML)
OR</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C20">C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized</a> (CSS)
</p></li></ol></div><div><h6 class="situation">Third Requirement: Techniques to ensure text is not justified (aligned to both the left and the right margins)</h6><ol class="enumar"><li class="basecssbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C19">C19: Specifying alignment either to the left OR right in CSS</a> (CSS)
OR</p></li><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G172">G172: Providing a mechanism to remove full justification of text</a> OR </p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G169">G169: Aligning text on only one side</a>
</p></li></ol></div><div><h6 class="situation">Fourth Requirement: Techniques to ensure line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing</h6><ol class="enumar"><li><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G188">G188: Providing a button on the page to increase line spaces and paragraph spaces</a> OR</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C21">C21: Specifying line spacing in CSS</a> (CSS)
</p></li></ol></div><div><h6 class="situation">Fifth Requirement: Techniques to ensure text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window</h6><ol class="enumar"><li><p> Not interfering with the user agent's reflow of text as the viewing window is narrowed (General, Future Link) OR </p></li><li><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G146">G146: Using liquid layout</a>
<em>AND</em> using measurements that are relative to other measurements in the content by using one or more of the following techniques:</p><ul><li class="basecssbase"><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C12">C12: Using percent for font sizes</a> (CSS)
OR </p></li><li class="basecssbase"><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C13">C13: Using named font sizes</a> (CSS)
OR </p></li><li class="basecssbase"><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C14">C14: Using em units for font sizes</a> (CSS)
OR </p></li><li class="basecssbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C24">C24: Using percentage values in CSS for container sizes</a> (CSS)
OR </p></li><li class="basescriptbase"><p><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR34">SCR34: Calculating size and position in a way that scales with text size</a> (Scripting)
OR </p></li></ul></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C26">C26: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text</a> (CSS)
</p></li></ol></div></div></div><div class="advisory"><h5 id="visual-audio-contrast-visual-presentation-tech-optional-head">Advisory Techniques for 1.4.8 - Visual Presentation </h5><ul><li class="basebase"><p> Using a hover effect to highlight a paragraph, list items, or table cells (CSS) (future link)
</p></li><li class="basebase"><p> Presenting text in sans serif font or providing a mechanism to achieve this (CSS) (future link)</p></li><li><p> Using vertical (bulleted or numbered) lists rather than inline lists (future link)</p></li><li><p> Using upper and lower case according to the spelling conventions of the text language (future link)</p></li><li><p> Providing large fonts by default (future link)</p></li><li><p> Avoiding the use of text in raster images (future link)</p></li><li><p> Avoiding scaling font sizes smaller than the user-agent default (future link)</p></li><li><p> Providing sufficient inter-column spacing (future link)</p></li><li><p> Avoiding centrally aligned text (future link)</p></li><li><p> Avoiding chunks of italic text (future link) </p></li><li><p> Avoiding overuse of different styles on individual pages and in sites (future link)</p></li><li><p> Making links visually distinct (future link)</p></li><li><p> Providing expandable bullets (future link)
</p></li><li><p> Show/hide bullet points (future link)
</p></li><li><p> Putting an em-space or two spaces after sentences (future link)</p></li></ul></div><div class="failures"><h5 id="visual-audio-contrast-visual-presentation-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 1.4.8 - Visual Presentation </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F24">F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without
specifying background colors or vice versa</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F88">F88: Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-visual-audio-contrast-text-images" title="Go to top of page">top of page</a></p></div><div class="normative" id="visual-audio-contrast-text-images"><h4 title="Success Criterion 1.4.9 - Images of Text (No Exception)" class="sc">Images of Text (No Exception)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-text-images">1.4.9</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#images-of-textdef" class="termref">Images of text</a> are only used for <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#puredecdef" class="termref">pure decoration</a> or where a particular presentation of <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#textdef" class="termref">text</a> is <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#essentialdef" class="termref">essential</a> to the information being conveyed. <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-images.html" class="HTMlink">Understanding Success Criterion 1.4.9</a></p><div class="note"><p class="prefix"><em>Note: </em>Logotypes (text that is part of a logo or brand name) are considered essential.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="visual-audio-contrast-text-images-sufficient-head">Sufficient Techniques for 1.4.9 - Images of Text (No Exception) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C22">C22: Using CSS to control visual presentation of text</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C30">C30: Using CSS to replace text with images of text and providing user interface controls to switch</a> (CSS)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G140">G140: Separating information and structure from presentation to enable different presentations</a>
</p></li></ol></div></div><div class="advisory"><h5 id="visual-audio-contrast-text-images-tech-optional-head">Advisory Techniques for 1.4.9 - Images of Text (No Exception) </h5><div><h6 class="situation">General Techniques for Non-Decorative Content</h6><ul><li><p>Using server-side scripts to resize images of text (future link)</p></li></ul></div><div><h6 class="situation">CSS Techniques</h6><ul><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C12">C12: Using percent for font sizes</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C13">C13: Using named font sizes</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C14">C14: Using em units for font sizes</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C8">C8: Using CSS letter-spacing to control spacing within a word</a> (CSS)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C6">C6: Positioning content based on structural markup</a> (CSS)
</p></li><li><p>Avoid applying text styling to text characters within a word (future link)</p></li></ul></div></div></div><h3 id="keyboard-operation" title="
Guideline 2.1 - Keyboard Accessible">Keyboard Accessible<span class="screenreader">:</span></h3><p class="guideline"><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#keyboard-operation">Guideline 2.1</a>
Make all functionality available from a keyboard.
<a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html" class="GLlink">Understanding Guideline 2.1</a></p><div class="level1"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-keyboard-operation-keyboard-operable" title="Go to top of page">top of page</a></p></div><div class="normative" id="keyboard-operation-keyboard-operable"><h4 title="Success Criterion 2.1.1 - Keyboard" class="sc">Keyboard<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">2.1.1</a> All <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#functiondef" class="termref">functionality</a> of the content is operable through a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#keybrd-interfacedef" class="termref">keyboard interface</a> without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html" class="HTMlink">Understanding Success Criterion 2.1.1</a></p><div class="note"><p class="prefix"><em>Note 1:
</em>This exception relates to the underlying function, not the input technique. For example, if using handwriting to enter text, the input technique (handwriting) requires path-dependent input but the underlying function (text input) does not.</p><p class="prefix"><em>Note 2:
</em>This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="keyboard-operation-keyboard-operable-sufficient-head">Sufficient Techniques for 2.1.1 - Keyboard </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G202">G202: Ensuring keyboard control for all functionality</a>
</p></li><li class="basebase"><p>Ensuring keyboard control by using one of the following techniques.</p><ul><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H91">H91: Using HTML form controls and links</a> (HTML)
</p></li></ul></li><li class="basegeneralbase"><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G90">G90: Providing keyboard-triggered event handlers</a> using one of the following techniques: </p><ul><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR20">SCR20: Using both keyboard and other device-specific functions</a> (Scripting)
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR35">SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons</a> (Scripting)
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR2">SCR2: Using redundant keyboard and mouse event handlers</a> (Scripting)
</p></li></ul></li></ol></div></div><div class="advisory"><h5 id="keyboard-operation-keyboard-operable-tech-optional-head">Advisory Techniques for 2.1.1 - Keyboard </h5><ul><li class="basescriptbase"><p>Using XHTML role, state, and value attributes if repurposing static elements as interactive user interface components (future link) AND <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR29">SCR29: Adding keyboard-accessible actions to static HTML elements</a> (Scripting)
</p></li><li><p>Providing keyboard shortcuts to important links and form controls (future link)</p></li><li><p>Using unique letter combinations to begin each item of a list (future link)</p></li><li class="basebase"><p>Choosing the most abstract event handler (future link) (Scripting)</p></li><li class="basebase"><p>Using the onactivate event (future link) (Scripting)</p></li><li><p>Avoiding use of common user-agent keyboard commands for other purposes (future link) </p></li></ul></div><div class="failures"><h5 id="keyboard-operation-keyboard-operable-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.1.1 - Keyboard </h5><ul><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F54">F54: Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event
handlers (including gesture) for a function</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F55">F55:
Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F42">F42: Failure of Success Criterion 1.3.1 and 2.1.1 due to using scripting events to emulate links in a way that is not programmatically determinable</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-keyboard-operation-trapping" title="Go to top of page">top of page</a></p></div><div class="normative" id="keyboard-operation-trapping"><h4 title="Success Criterion 2.1.2 - No Keyboard Trap" class="sc">No Keyboard Trap<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#keyboard-operation-trapping">2.1.2</a> If keyboard focus can be moved to a component of the page using a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#keybrd-interfacedef" class="termref">keyboard interface</a>, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html" class="HTMlink">Understanding Success Criterion 2.1.2</a></p><div class="note"><p class="prefix"><em>Note: </em>Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See <em><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#cc5">Conformance Requirement 5: Non-Interference</a></em>.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="keyboard-operation-trapping-sufficient-head">Sufficient Techniques for 2.1.2 - No Keyboard Trap </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G21">G21: Ensuring that users are not trapped in content</a>
</p></li></ol></div></div><div class="failures"><h5 id="keyboard-operation-trapping-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.1.2 - No Keyboard Trap </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F10">F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way
that traps users inside one format type</a>
</p></li></ul></div></div><div class="level3"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-keyboard-operation-all-funcs" title="Go to top of page">top of page</a></p></div><div class="normative" id="keyboard-operation-all-funcs"><h4 title="Success Criterion 2.1.3 - Keyboard (No Exception)" class="sc">Keyboard (No Exception)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#keyboard-operation-all-funcs">2.1.3</a> All <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#functiondef" class="termref">functionality</a> of the content is operable through a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#keybrd-interfacedef" class="termref">keyboard interface</a> without requiring specific timings for individual keystrokes. <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-all-funcs.html" class="HTMlink">Understanding Success Criterion 2.1.3</a></p></div><div class="sufficient"><div class="boxed"><h5 id="keyboard-operation-all-funcs-sufficient-head">Sufficient Techniques for 2.1.3 - Keyboard (No Exception) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><p>No additional techniques exist for this Success Criterion. Follow <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html#keyboard-operation-keyboard-operable-techniques-head">techniques for Success Criterion 2.1.1</a>. If that is not possible because there is a requirement for path-dependent input, then it is not possible to meet this Level AAA Success Criterion.</p></div></div></div><h3 id="time-limits" title="
Guideline 2.2 - Enough Time">Enough Time<span class="screenreader">:</span></h3><p class="guideline"><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#time-limits">Guideline 2.2</a>
Provide users enough time to read and use content.
<a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html" class="GLlink">Understanding Guideline 2.2</a></p><div class="level1"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-time-limits-required-behaviors" title="Go to top of page">top of page</a></p></div><div class="normative" id="time-limits-required-behaviors"><h4 title="Success Criterion 2.2.1 - Timing Adjustable" class="sc">Timing Adjustable<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#time-limits-required-behaviors">2.2.1</a> For each time limit that is
set by the content, at least one of the following is true:
<em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html" class="HTMlink">Understanding Success Criterion 2.2.1</a></p><ul><li><p>
<strong class="sc-handle">Turn off: </strong>The user is allowed to turn off the time limit
before encountering it; or
</p></li><li><p>
<strong class="sc-handle">Adjust: </strong>The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or</p></li><li><p>
<strong class="sc-handle">Extend: </strong>The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or</p></li><li><p>
<strong class="sc-handle">Real-time Exception: </strong>The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or</p></li><li><p>
<strong class="sc-handle">Essential Exception: </strong>The time limit is <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#essentialdef" class="termref">essential</a> and extending it would invalidate the activity; or
</p></li><li><p>
<strong class="sc-handle">20 Hour Exception: </strong>The time limit is longer than 20 hours.
</p></li></ul><div class="note"><p class="prefix"><em>Note: </em>This success criterion helps ensure that users can complete tasks without unexpected changes in content or context that are a result of a time limit. This success criterion should be considered in conjunction with <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#consistent-behavior-receive-focus">
Success Criterion 3.2.1</a>, which puts limits on changes of content or context as a result of user action.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="time-limits-required-behaviors-sufficient-head">Sufficient Techniques for 2.2.1 - Timing Adjustable </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><div><h6 class="situation">Situation A: If there are session time limits:</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G133">G133: Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G198">G198: Providing a way for the user to turn the time limit off</a>
</p></li></ol></div><div><h6 class="situation">Situation B: If a time limit is controlled by a script on the page:</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G198">G198: Providing a way for the user to turn the time limit off</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G180">G180: Providing the user with a means to set the time limit to 10 times the default time limit</a>
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR16">SCR16: Providing a script that warns the user a time limit is about to expire</a> (Scripting)
<strong>AND</strong>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR1">SCR1: Allowing the user to extend the default time limit
</a> (Scripting)
</p></li></ol></div><div><h6 class="situation">Situation C: If there are time limits on reading:</h6><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G4">G4: Allowing the content to be paused and restarted from where it was paused</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G198">G198: Providing a way for the user to turn the time limit off</a>
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR33">SCR33: Using script to scroll content, and providing a mechanism to pause it</a> (Scripting)
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR36">SCR36: Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area</a> (Scripting)
</p></li></ol></div></div></div><div class="advisory"><h5 id="time-limits-required-behaviors-tech-optional-head">Advisory Techniques for 2.2.1 - Timing Adjustable </h5><ul><li class="basebase"><p>
Using a script to poll the server and notify a user if a time limit is present (future link) (Scripting)
</p></li><li><p>Using sounds to focus user's attention (future link)</p></li></ul></div><div class="failures"><h5 id="time-limits-required-behaviors-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.2.1 - Timing Adjustable </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F40">F40: Failure of Success Criterion 2.2.1 and 2.2.4 due to using meta redirect with a time limit
</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F41">F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh with a
time-out</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F58">F58: Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically
redirect pages after a time-out</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-time-limits-pause" title="Go to top of page">top of page</a></p></div><div class="normative" id="time-limits-pause"><h4 title="Success Criterion 2.2.2 - Pause, Stop, Hide" class="sc">Pause, Stop, Hide<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#time-limits-pause">2.2.2</a>
For moving, <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#blinksdef" class="termref">blinking</a>, scrolling, or auto-updating information, all of the following are true: <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html" class="HTMlink">Understanding Success Criterion 2.2.2</a></p><ul><li><p><strong class="sc-handle">Moving, blinking, scrolling: </strong>For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#pauseddef" class="termref">pause</a>, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#essentialdef" class="termref">essential</a>; and</p></li><li><p><strong class="sc-handle">Auto-updating: </strong>For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.</p></li></ul><div class="note"><p class="prefix"><em>Note 1:
</em>For requirements related to flickering or flashing content, refer to <em><a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#seizure">Guideline 2.3</a></em>.</p><p class="prefix"><em>Note 2:
</em>Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See <em><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#cc5">Conformance Requirement 5: Non-Interference</a></em>.</p><p class="prefix"><em>Note 3:
</em>Content that is updated periodically by software or that is streamed to the user agent is not required to preserve or present information that is generated or received between the initiation of the pause and resuming presentation, as this may not be technically possible, and in many situations could be misleading to do so.
</p><p class="prefix"><em>Note 4:
</em>An animation that occurs as part of a preload phase or similar situation can be considered essential if interaction cannot occur during that phase for all users and if not indicating progress could confuse users or cause them to think that content was frozen or broken.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="time-limits-pause-sufficient-head">Sufficient Techniques for 2.2.2 - Pause, Stop, Hide </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G4">G4: Allowing the content to be paused and restarted from where it was paused</a>
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR33">SCR33: Using script to scroll content, and providing a mechanism to pause it</a> (Scripting)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G11">G11: Creating content that blinks for less than 5 seconds</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G187">G187: Using a technology to include blinking content that can be turned off via the user agent</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G152">G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)</a>
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR22">SCR22: Using scripts to control blinking and stop it in five seconds or less</a> (Scripting)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G186">G186: Using a control in the Web page that stops moving, blinking, or auto-updating content</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G191">G191: Providing a link, button, or other mechanism that reloads the page without any blinking content</a>
</p></li></ol></div></div><div class="advisory"><h5 id="time-limits-pause-tech-optional-head">Advisory Techniques for 2.2.2 - Pause, Stop, Hide </h5><ul><li><p>
Providing a mechanism to stop all content that blinks within a Web page (future link)
</p></li><li><p>
Providing the user with a means to stop moving content even if it stops automatically within 5 seconds (future link)
</p></li></ul></div><div class="failures"><h5 id="time-limits-pause-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.2.2 - Pause, Stop, Hide </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F16">F16: Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F47">F47: Failure of Success Criterion 2.2.2 due to using the blink element</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F4">F4: Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a
mechanism to stop it in less than five seconds</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F50">F50: Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a
mechanism to stop the blinking at 5 seconds or less</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F7">F7: Failure of Success Criterion 2.2.2 due to an object or applet, such as Java or Flash,
that has blinking content without a mechanism to pause the content that blinks
for more than five seconds</a>
</p></li></ul></div></div><div class="level3"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-time-limits-no-exceptions" title="Go to top of page">top of page</a></p></div><div class="normative" id="time-limits-no-exceptions"><h4 title="Success Criterion 2.2.3 - No Timing" class="sc">No Timing<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#time-limits-no-exceptions">2.2.3</a> Timing is not an <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#essentialdef" class="termref">essential</a> part of the event or activity presented by the content, except for non-interactive <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#synchronizedmediadef" class="termref">synchronized media</a> and
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#real-time-eventsdef" class="termref">real-time events</a>.
<em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html" class="HTMlink">Understanding Success Criterion 2.2.3</a></p></div><div class="sufficient"><div class="boxed"><h5 id="time-limits-no-exceptions-sufficient-head">Sufficient Techniques for 2.2.3 - No Timing </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G5">G5: Allowing users to complete an activity without any time limit</a>
</p></li></ol></div></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-time-limits-postponed" title="Go to top of page">top of page</a></p></div><div class="normative" id="time-limits-postponed"><h4 title="Success Criterion 2.2.4 - Interruptions" class="sc">Interruptions<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#time-limits-postponed">2.2.4</a> Interruptions can be postponed or suppressed by the user, except interruptions involving an <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#emergencydef" class="termref">emergency</a>. <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html" class="HTMlink">Understanding Success Criterion 2.2.4</a></p></div><div class="sufficient"><div class="boxed"><h5 id="time-limits-postponed-sufficient-head">Sufficient Techniques for 2.2.4 - Interruptions </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G75">G75: Providing a mechanism to postpone any updating of content</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G76">G76: Providing a mechanism to request an update of the content instead of
updating automatically</a>
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR14">SCR14: Using scripts to make nonessential alerts optional</a> (Scripting)
</p></li></ol></div></div><div class="failures"><h5 id="time-limits-postponed-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.2.4 - Interruptions </h5><ul><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F40">F40: Failure of Success Criterion 2.2.1 and 2.2.4 due to using meta redirect with a time limit
</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F41">F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh with a
time-out</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-time-limits-server-timeout" title="Go to top of page">top of page</a></p></div><div class="normative" id="time-limits-server-timeout"><h4 title="Success Criterion 2.2.5 - Re-authenticating" class="sc">Re-authenticating<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#time-limits-server-timeout">2.2.5</a> When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating. <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-server-timeout.html" class="HTMlink">Understanding Success Criterion 2.2.5</a></p></div><div class="sufficient"><div class="boxed"><h5 id="time-limits-server-timeout-sufficient-head">Sufficient Techniques for 2.2.5 - Re-authenticating </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
Providing options to continue without loss of data using one of the following techniques:</p><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G105">G105: Saving data so that it can be used after a user re-authenticates</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G181">G181: Encoding user data as hidden or encrypted data in a re-authorization page</a>
</p></li></ul></li></ol><div class="note"><p class="prefix"><em>Note: </em>Refer to <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html#time-limits-required-behaviors-techniques-head">Techniques for Addressing Success Criterion 2.2.1</a> for techniques related to providing notifications about time limits.
</p></div></div></div><div class="failures"><h5 id="time-limits-server-timeout-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.2.5 - Re-authenticating </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F12">F12: Failure of Success Criterion 2.2.5 due to having a session time limit without a mechanism
for saving user's input and re-establishing that information upon
re-authentication</a>
</p></li></ul></div></div><h3 id="seizure" title="
Guideline 2.3 - Seizures">Seizures<span class="screenreader">:</span></h3><p class="guideline"><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#seizure">Guideline 2.3</a> Do not design content in a way that is known to cause seizures.<a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure.html" class="GLlink">Understanding Guideline 2.3</a></p><div class="advisory"><h4 id="seizure-advisory">Advisory Techniques for Guideline 2.3</h4><ul><li><p>
Ensuring that content does not violate spatial pattern thresholds (future link)
</p></li></ul></div><div class="level1"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-seizure-does-not-violate" title="Go to top of page">top of page</a></p></div><div class="normative" id="seizure-does-not-violate"><h4 title="Success Criterion 2.3.1 - Three Flashes or Below Threshold" class="sc">Three Flashes or Below Threshold<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#seizure-does-not-violate">2.3.1</a>
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef" class="termref">Web pages</a> do not contain anything that flashes more than three times in any one second period, or the <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#flash-def" class="termref">flash</a> is below the <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#general-thresholddef" class="termref">general flash and red flash thresholds</a>.
<em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html" class="HTMlink">Understanding Success Criterion 2.3.1</a></p><div class="note"><p class="prefix"><em>Note: </em>Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See <em><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#cc5">Conformance Requirement 5: Non-Interference</a></em>.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="seizure-does-not-violate-sufficient-head">Sufficient Techniques for 2.3.1 - Three Flashes or Below Threshold </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G19">G19: Ensuring that no component of the content flashes more than three times in any 1-second period</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G176">G176: Keeping the flashing area small enough</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G15">G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold</a>
</p></li></ol></div></div><div class="advisory"><h5 id="seizure-does-not-violate-tech-optional-head">Advisory Techniques for 2.3.1 - Three Flashes or Below Threshold </h5><ul><li><p>Reducing contrast for any flashing content (future link) </p></li><li><p>Avoiding fully saturated reds for any flashing content (future link) </p></li><li><p>Reducing the number of flashes even if they do not violate thresholds (future link) </p></li><li><p>Providing a mechanism to suppress any flashing content before it begins (future link)
</p></li><li><p>Slowing down live material to avoid rapid flashes (as in flashbulbs) (future link)</p></li><li><p>Freezing the image momentarily if 3 flashes within one second are detected (future link)</p></li><li><p>Dropping the contrast ratio if 3 flashes within one second are detected (future link)</p></li><li><p>Allowing users to set a custom flash rate limit (future link)</p></li></ul></div></div><div class="level3"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-seizure-three-times" title="Go to top of page">top of page</a></p></div><div class="normative" id="seizure-three-times"><h4 title="Success Criterion 2.3.2 - Three Flashes" class="sc">Three Flashes<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#seizure-three-times">2.3.2</a>
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef" class="termref">Web pages</a> do not contain anything that <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#flash-def" class="termref">flashes</a> more than three times in any one second period. <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-three-times.html" class="HTMlink">Understanding Success Criterion 2.3.2</a></p></div><div class="sufficient"><div class="boxed"><h5 id="seizure-three-times-sufficient-head">Sufficient Techniques for 2.3.2 - Three Flashes </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G19">G19: Ensuring that no component of the content flashes more than three times in any 1-second period</a>
</p></li></ol></div></div><div class="advisory"><h5 id="seizure-three-times-tech-optional-head">Advisory Techniques for 2.3.2 - Three Flashes </h5><ul><li><p>Reducing contrast for any flashing content (future link) </p></li><li><p>Avoiding fully saturated reds for any flashing content (future link) </p></li><li><p>Reducing the number of flashes even if they don't violate thresholds (future link) </p></li><li><p>Slowing down live material to avoid rapid flashes (as in flashbulbs) (future link)</p></li><li><p>Freezing the image momentarily if 3 flashes within one second are detected (future link)</p></li><li><p>Dropping the contrast ratio if 3 flashes within one second are detected (future link)</p></li></ul></div></div><h3 id="navigation-mechanisms" title="
Guideline 2.4 - Navigable">Navigable<span class="screenreader">:</span></h3><p class="guideline"><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms">Guideline 2.4</a>
Provide ways to help users navigate, find content, and determine where they are.
<a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms.html" class="GLlink">Understanding Guideline 2.4</a></p><div class="advisory"><h4 id="navigation-mechanisms-advisory">Advisory Techniques for Guideline 2.4</h4><ul><li><p>Limiting the number of links per page (future link) </p></li><li><p>
Providing mechanisms to navigate to different sections of the content of a Web page (future link)
</p></li><li><p>Making links visually distinct (future link)
</p></li><li><p>Highlighting search terms (future link)</p></li></ul></div><div class="level1"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-navigation-mechanisms-skip" title="Go to top of page">top of page</a></p></div><div class="normative" id="navigation-mechanisms-skip"><h4 title="Success Criterion 2.4.1 - Bypass Blocks" class="sc">Bypass Blocks<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-skip">2.4.1</a> A <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#mechanismdef" class="termref">mechanism</a> is available to bypass blocks of content that are repeated on multiple <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef" class="termref">Web pages</a>. <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html" class="HTMlink">Understanding Success Criterion 2.4.1</a></p></div><div class="sufficient"><div class="boxed"><h5 id="navigation-mechanisms-skip-sufficient-head">Sufficient Techniques for 2.4.1 - Bypass Blocks </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>Creating links to skip blocks of repeated material using one of the following techniques:</p><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1">G1: Adding a link at the top of each page that goes directly to the main content area</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G123">G123: Adding a link at the beginning of a block of repeated content to go to the end of the block</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G124">G124: Adding links at the top of the page to each area of the content</a>
</p></li></ul></li><li><p>Grouping blocks of repeated material in a way that can be skipped, using one of the following techniques:</p><ul><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H69">H69: Providing heading elements at the beginning of each section of content</a> (HTML)
</p></li><li class="basehtmlbase"><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR28">SCR28: Using an expandable and collapsible menu to bypass block of content</a> (Scripting)
</li></ul></li></ol></div></div><div class="advisory"><h5 id="navigation-mechanisms-skip-tech-optional-head">Advisory Techniques for 2.4.1 - Bypass Blocks </h5><ul><li><p>
Providing keyboard access to important links and form controls (future link)
</p></li><li><p>
Providing skip links to enhance page navigation (future link)
</p></li><li><p>
Providing access keys (future link)
</p></li><li><p>Using accessibility supported technologies which allow structured navigation by user agents and assistive technologies (future link)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C6">C6: Positioning content based on structural markup</a> (CSS)
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-navigation-mechanisms-title" title="Go to top of page">top of page</a></p></div><div class="normative" id="navigation-mechanisms-title"><h4 title="Success Criterion 2.4.2 - Page Titled" class="sc">Page Titled<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-title">2.4.2</a>
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef" class="termref">Web pages</a> have titles that describe topic or purpose. <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html" class="HTMlink">Understanding Success Criterion 2.4.2</a></p></div><div class="sufficient"><div class="boxed"><h5 id="navigation-mechanisms-title-sufficient-head">Sufficient Techniques for 2.4.2 - Page Titled </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li class="basegeneralbase"><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G88">G88: Providing descriptive titles for Web pages</a> <strong>AND</strong> associating a title with a Web page using one of the following techniques:
</p><ul><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H25">H25: Providing a title using the title element</a> (HTML)
</p></li></ul></li></ol></div></div><div class="advisory"><h5 id="navigation-mechanisms-title-tech-optional-head">Advisory Techniques for 2.4.2 - Page Titled </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G127">G127: Identifying a Web page's relationship to a larger collection of Web pages</a>
</p></li><li><p>
Identifying the subject of the Web page (future link)
</p></li><li class="baseariabase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/ARIA1">ARIA1: Using the aria-describedby property to provide a descriptive label for input controls</a> (ARIA)
</p></li><li><p>Providing a meaningful name for identifying frames (future link)</p></li><li><p>Using unique titles for Web pages (future link)
</p></li><li><p>Providing a descriptive top-level page heading (future link)
</p></li></ul></div><div class="failures"><h5 id="navigation-mechanisms-title-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.4.2 - Page Titled </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F25">F25: Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the
contents</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-navigation-mechanisms-focus-order" title="Go to top of page">top of page</a></p></div><div class="normative" id="navigation-mechanisms-focus-order"><h4 title="Success Criterion 2.4.3 - Focus Order" class="sc">Focus Order<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-order">2.4.3</a> If a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef" class="termref">Web page</a> can be <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#nav-seqdef" class="termref">navigated sequentially</a> and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html" class="HTMlink">Understanding Success Criterion 2.4.3</a></p></div><div class="sufficient"><div class="boxed"><h5 id="navigation-mechanisms-focus-order-sufficient-head">Sufficient Techniques for 2.4.3 - Focus Order </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G59">G59: Placing the interactive elements in an order that follows sequences and relationships within the content</a>
</p></li><li class="basebase"><p>Giving focus to elements in an order that follows sequences and relationships within the content using one of the following techniques:</p><ul><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H4">H4: Creating a logical tab order through links, form controls, and objects</a> (HTML)
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C27">C27: Making the DOM order match the visual order</a> (CSS)
</p></li></ul></li><li class="basebase"><p>Changing a Web page dynamically using one of the following techniques:</p><ul><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR26">SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element</a> (Scripting)
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR37">SCR37: Creating Custom Dialogs in a Device Independent Way</a> (Scripting)
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR27">SCR27: Reordering page sections using the Document Object Model</a> (Scripting)
</p></li></ul></li></ol></div></div><div class="advisory"><h5 id="navigation-mechanisms-focus-order-tech-optional-head">Advisory Techniques for 2.4.3 - Focus Order </h5><ul><li><p>Providing a highly visible highlighting mechanism for links or controls when they receive keyboard focus (future link)
</p></li><li><p>Creating alternative presentation orders (future link)</p></li></ul></div><div class="failures"><h5 id="navigation-mechanisms-focus-order-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.4.3 - Focus Order </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F44">F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that
does not preserve meaning and operability</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F85">F85: Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-navigation-mechanisms-refs" title="Go to top of page">top of page</a></p></div><div class="normative" id="navigation-mechanisms-refs"><h4 title="Success Criterion 2.4.4 - Link Purpose (In Context)" class="sc">Link Purpose (In Context)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs">2.4.4</a>
The <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#linkpurposedef" class="termref">purpose of each link</a> can be determined from the link text alone or from the link text together with its <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#pdlinkcontextdef" class="termref">programmatically determined link context</a>, except where the purpose of the link would be <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#ambiguouslinkdef" class="termref">ambiguous to users in general</a>. <em>(Level A)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html" class="HTMlink">Understanding Success Criterion 2.4.4</a></p></div><div class="sufficient"><div class="boxed"><h5 id="navigation-mechanisms-refs-sufficient-head">Sufficient Techniques for 2.4.4 - Link Purpose (In Context) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G91">G91: Providing link text that describes the purpose of a link</a>
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H30">H30: Providing link text that describes the purpose of a link for anchor elements</a> (HTML)</p></li><li><p>Allowing the user to choose short or long link text using one of the techniques below:</p><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G189">G189: Providing a control near the beginning of the Web page that changes the link text</a>
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR30">SCR30: Using scripts to change the link text</a> (Scripting)
</p></li></ul></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G53">G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence</a>
</p></li><li class="basehtmlorcssbase"><p>Providing a supplemental description of the purpose of a link using one of the following techniques:</p><ul><li class="basehtmlbase"><a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7">C7: Using CSS to hide a portion of the link text </a> (CSS)
</li></ul></li><li class="basebase"><p>
Identifying the purpose of a link using link text combined with programmatically determined link context using one of the following techniques:
</p><ul><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H77">H77: Identifying the purpose of a link using link text combined with its enclosing
list item</a> (HTML)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H78">H78: Identifying the purpose of a link using link text combined with its enclosing
paragraph</a> (HTML)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H79">H79: Identifying the purpose of a link using link text combined with its enclosing
table cell and associated table headings</a> (HTML)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H81">H81: Identifying the purpose of a link in a nested list using link text combined with
the parent list item under which the list is nested</a> (HTML)
</p></li></ul></li></ol></div></div><div class="advisory"><h5 id="navigation-mechanisms-refs-tech-optional-head">Advisory Techniques for 2.4.4 - Link Purpose (In Context) </h5><ul><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H2">H2: Combining adjacent image and text links for the same resource</a> (HTML)
</p></li><li class="baseariabase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/ARIA1">ARIA1: Using the aria-describedby property to provide a descriptive label for input controls</a> (ARIA)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H80">H80: Identifying the purpose of a link using link text combined with the preceding
heading element</a> (HTML)
</p></li></ul></div><div class="failures"><h5 id="navigation-mechanisms-refs-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.4.4 - Link Purpose (In Context) </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F63">F63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link</a>
</p></li><li class="basefailurebase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F89">F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link</a>
</p></li></ul></div></div><div class="level2"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-navigation-mechanisms-mult-loc" title="Go to top of page">top of page</a></p></div><div class="normative" id="navigation-mechanisms-mult-loc"><h4 title="Success Criterion 2.4.5 - Multiple Ways" class="sc">Multiple Ways<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-mult-loc">2.4.5</a> More than one way is available to locate a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef" class="termref">Web page</a>
within a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#set-of-web-pagesdef" class="termref">set of Web pages</a>
except where the Web Page is the result of, or a step in, a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#processdef" class="termref">process</a>.
<em>(Level AA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-mult-loc.html" class="HTMlink">Understanding Success Criterion 2.4.5</a></p></div><div class="sufficient"><div class="boxed"><h5 id="navigation-mechanisms-mult-loc-sufficient-head">Sufficient Techniques for 2.4.5 - Multiple Ways </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>Using two or more of the following techniques:</p><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G125">G125: Providing links to navigate to related Web pages</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G64">G64: Providing a Table of Contents</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G63">G63: Providing a site map</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G161">G161: Providing a search function to help users find content</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G126">G126: Providing a list of links to all other Web pages</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G185">G185: Linking to all of the pages on the site from the home page</a>
</p></li></ul></li></ol></div></div><div class="advisory"><h5 id="navigation-mechanisms-mult-loc-tech-optional-head">Advisory Techniques for 2.4.5 - Multiple Ways </h5><ul><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H59">H59: Using the link element and navigation tools</a> (HTML)
</p></li><li><p>
Including information about presentation modes in tables of contents and concept maps (future link)
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-navigation-mechanisms-descriptive" title="Go to top of page">top of page</a></p></div><div class="normative" id="navigation-mechanisms-descriptive"><h4 title="Success Criterion 2.4.6 - Headings and Labels" class="sc">Headings and Labels<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-descriptive">2.4.6</a>
Headings and <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#labeldef" class="termref">labels</a> describe topic or purpose. <em>(Level AA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html" class="HTMlink">Understanding Success Criterion 2.4.6</a></p></div><div class="sufficient"><div class="boxed"><h5 id="navigation-mechanisms-descriptive-sufficient-head">Sufficient Techniques for 2.4.6 - Headings and Labels </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G130">G130: Providing descriptive headings</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G131">G131: Providing descriptive labels</a>
</p></li></ol><div class="note"><p class="prefix"><em>Note: </em>
Headings and labels must be programmatically determined, per <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-programmatic">Success Criterion 1.3.1
</a>.</p></div></div></div><div class="advisory"><h5 id="navigation-mechanisms-descriptive-tech-optional-head">Advisory Techniques for 2.4.6 - Headings and Labels </h5><ul><li><p>
Using unique section headings in a Web Page (future link)
</p></li><li><p>
Starting section headings with unique information (future link)
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-navigation-mechanisms-focus-visible" title="Go to top of page">top of page</a></p></div><div class="normative" id="navigation-mechanisms-focus-visible"><h4 title="Success Criterion 2.4.7 - Focus Visible" class="sc">Focus Visible<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-visible">2.4.7</a> Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. <em>(Level AA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html" class="HTMlink">Understanding Success Criterion 2.4.7</a></p></div><div class="sufficient"><div class="boxed"><h5 id="navigation-mechanisms-focus-visible-sufficient-head">Sufficient Techniques for 2.4.7 - Focus Visible </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G149">G149: Using user interface components that are highlighted by the user agent when they receive focus</a>
</p></li><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C15">C15: Using CSS to change the presentation of a user interface component when it receives focus</a> (CSS)
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G165">G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G195">G195: Using an author-supplied, highly visible focus indicator</a>
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR31">SCR31: Using script to change the background color or border of the element with focus</a> (Scripting)
</p></li></ol></div></div><div class="advisory"><h5 id="navigation-mechanisms-focus-visible-tech-optional-head">Advisory Techniques for 2.4.7 - Focus Visible </h5><ul><li><p>Highlighting a link or control when the mouse hovers over it (future link)</p></li><li><p>Providing a highly visible highlighting mechanism for links or controls when they receive keyboard focus (future link)
</p></li></ul></div><div class="failures"><h5 id="navigation-mechanisms-focus-visible-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.4.7 - Focus Visible </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F55">F55:
Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F78">F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator</a>
</p></li></ul></div></div><div class="level3"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-navigation-mechanisms-location" title="Go to top of page">top of page</a></p></div><div class="normative" id="navigation-mechanisms-location"><h4 title="Success Criterion 2.4.8 - Location" class="sc">Location<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-location">2.4.8</a> Information about the user's location within a <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#set-of-web-pagesdef" class="termref">set of Web pages</a> is available. <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-location.html" class="HTMlink">Understanding Success Criterion 2.4.8</a></p></div><div class="sufficient"><div class="boxed"><h5 id="navigation-mechanisms-location-sufficient-head">Sufficient Techniques for 2.4.8 - Location </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G65">G65: Providing a breadcrumb trail</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G63">G63: Providing a site map</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G128">G128: Indicating current location within navigation bars</a>
</p></li><li class="basegeneralbase"><p> <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G127">G127: Identifying a Web page's relationship to a larger collection of Web pages</a> using one of the following techniques:</p><ul><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H59">H59: Using the link element and navigation tools</a> (HTML)
</p></li></ul></li></ol></div></div><div class="advisory"><h5 id="navigation-mechanisms-location-tech-optional-head">Advisory Techniques for 2.4.8 - Location </h5><ul><li><p>
Providing a link to the home page or main page (future link)
</p></li><li><p>Providing an easy-to-read version of information about the organization of a set of Web pages (future link)
</p></li><li><p>Providing a sign language version of information about the organization of a set of Web pages
(future link)
</p></li><li><p>Providing an easy-to-read summary at the beginning of each section of content (future link)
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-navigation-mechanisms-link" title="Go to top of page">top of page</a></p></div><div class="normative" id="navigation-mechanisms-link"><h4 title="Success Criterion 2.4.9 - Link Purpose (Link Only)" class="sc">Link Purpose (Link Only)<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-link">2.4.9</a>
A <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#mechanismdef" class="termref">mechanism</a> is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#ambiguouslinkdef" class="termref">ambiguous to users in general</a>. <em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-link.html" class="HTMlink">Understanding Success Criterion 2.4.9</a></p></div><div class="sufficient"><div class="boxed"><h5 id="navigation-mechanisms-link-sufficient-head">Sufficient Techniques for 2.4.9 - Link Purpose (Link Only) </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G91">G91: Providing link text that describes the purpose of a link</a>
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H30">H30: Providing link text that describes the purpose of a link for anchor elements</a> (HTML)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H24">H24: Providing text alternatives for the area elements of image maps </a> (HTML)
</p></li><li><p>Allowing the user to choose short or long link text using one of the techniques below:</p><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G189">G189: Providing a control near the beginning of the Web page that changes the link text</a>
</p></li><li class="basescriptbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR30">SCR30: Using scripts to change the link text</a> (Scripting)
</p></li></ul></li><li class="basebase"><p>Providing a supplemental description of the purpose of a link using one of the following techniques: </p><ul><li class="basecssbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7">C7: Using CSS to hide a portion of the link text </a> (CSS)
</p></li></ul></li></ol></div></div><div class="advisory"><h5 id="navigation-mechanisms-link-tech-optional-head">Advisory Techniques for 2.4.9 - Link Purpose (Link Only) </h5><ul><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H2">H2: Combining adjacent image and text links for the same resource</a> (HTML)
</p></li><li class="basehtmlbase"><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H33">H33: Supplementing link text with the title attribute</a> (HTML)
</p></li></ul></div><div class="failures"><h5 id="navigation-mechanisms-link-failures-head">Failures for <abbr title="Success Criterion">SC</abbr> 2.4.9 - Link Purpose (Link Only) </h5><ul><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F84">F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F89">F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link</a>
</p></li></ul></div><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-navigation-mechanisms-headings" title="Go to top of page">top of page</a></p></div><div class="normative" id="navigation-mechanisms-headings"><h4 title="Success Criterion 2.4.10 - Section Headings" class="sc">Section Headings<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-headings">2.4.10</a>
<a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#sectiondef" class="termref">Section</a> headings are used to organize the content.
<em>(Level AAA)</em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html" class="HTMlink">Understanding Success Criterion 2.4.10</a></p><div class="note"><p class="prefix"><em>Note 1:
</em>"Heading" is used in its general sense and includes titles and other ways to add a heading to different types of content.
</p><p class="prefix"><em>Note 2:
</em>This success criterion covers sections within writing, not <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#user-interface-componentdef" class="termref">user interface components</a>. User Interface components are covered under <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#ensure-compat-rsv">Success Criterion 4.1.2</a>.</p></div></div><div class="sufficient"><div class="boxed"><h5 id="navigation-mechanisms-headings-sufficient-head">Sufficient Techniques for 2.4.10 - Section Headings </h5><p>Note: <a href="http://www.w3.org/WAI/WCAG20/quickref/Overview.php#about-techs">Other techniques may also be sufficient if they meet the success criterion</a>.</p><ol class="enumar"><li><p>
<a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G141">G141: Organizing a page using headings</a>
</p></li></ol></div></div><div class="advisory"><h5 id="navigation-mechanisms-headings-tech-optional-head">Advisory Techniques for 2.4.10 - Section Headings </h5><ul><li class="basebase"><p>Using the 'live' property to mark live regions (future link) (ARIA)</p></li><li><p>
Providing mechanisms to navigate to different sections of the content of a Web page (future link)
</p></li></ul></div></div><h3 id="meaning" title="
Guideline 3.1 - Readable">Readable<span class="screenreader">:</span></h3><p class="guideline"><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#meaning">Guideline 3.1</a>
Make text content readable and understandable.
<a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning.html" class="GLlink">Understanding Guideline 3.1</a></p><div class="advisory"><h4 id="meaning-advisory">Advisory Techniques for Guideline 3.1</h4><ul><li><p>
Setting expectations about content in the page from uncontrolled sources (future link)
</p></li><li><p>
Providing sign language interpretation for all content (future link)
</p></li><li><p>Using the clearest and simplest language appropriate for the content (future link)
</p></li><li><p>Avoiding centrally aligned text (future link)
</p></li><li><p>Avoiding text that is fully justified (to both left and right margins) in a way that causes poor spacing between words or characters (future link)
</p></li><li><p>Using left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-left (future link)
</p></li><li><p>Limiting text column width (future link)</p></li><li><p>Avoiding chunks of italic text (future link)
</p></li><li><p>Avoiding overuse of different styles on individual pages and in sites (future link)
</p></li><li><p>Making links visually distinct (future link)
</p></li><li><p>Using images, illustrations, video, audio, or symbols to clarify meaning (future link)</p></li><li><p>Providing practical examples to clarify content (future link)</p></li><li><p>Using a light pastel background rather than a white background behind black text (future link)</p></li><li><p>Avoiding the use of unique interface controls unnecessarily (future link)</p></li><li><p>Using upper and lower case according to the spelling rules of the text language (future link)</p></li><li><p>Avoiding unusual foreign words (future link)</p></li><li><p>
Providing sign language versions of information, ideas, and processes that must be understood in order to use the content (future link)
</p></li><li><p>Making any reference to a location in a Web page into a link to that location (future link)
</p></li><li><p>Making references to a heading or title include the full text of the title (future link)
</p></li><li><p>Providing easy-to-read versions of basic information about a set of Web pages, including information about how to contact the Webmaster (future link)
</p></li><li><p>Providing a sign language version of basic information about a set of Web pages, including information about how to contact the Webmaster (future link)
</p></li></ul></div><div class="level1"><div align="right"><p class="showhidelink"><a href="#toc" class="showhideR" id="qr-meaning-doc-lang-id" title="Go to top of page">top of page</a></p></div><div class="normative" id="meaning-doc-lang-id"><h4 title="Success Criterion 3.1.1 - Language of Page" class="sc">Language of Page<span class="screenreader">:</span></h4><p class="sctxt"><a href="http://www.w3.org/TR/WCAG20/#meaning-doc-lang-id">3.1.1</a> The default