-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvisual-presentation.html
1065 lines (720 loc) · 70.5 KB
/
visual-presentation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Understanding Success Criterion 1.4.8: Visual Presentation | WAI | W3C</title>
<link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css" />
<link rel="stylesheet" href="base.css" />
</head>
<body dir="ltr"><a href="#main" class="button button--skip-link">Skip to content</a><div class="minimal-header-container default-grid">
<div class="minimal-header" id="site-header">
<div class="minimal-header-name"><a href="https://w3c.github.io/wcag/understanding/">WCAG 2.2 Understanding Docs</a></div>
<div class="minimal-header-subtitle">Informative explanations, not required to meet WCAG</div><a class="minimal-header-link" href="https://w3c.github.io/wcag/understanding/about">About WCAG Understanding Docs</a><div class="minimal-header-logo"><a href="http://w3.org/" aria-label="W3C">
<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 91.968 44" style="margin: 0.75em 0 0.75em 0.5em">
<g fill-rule="evenodd" fill="none">
<path fill="#015a9c" d="M-.231-.21h92.917v44.659H-.23z"></path>
<g fill-rule="nonzero" fill="#fff">
<path d="M21.752 0l7.789 26.78L37.329 0H58.444v2.662l-7.95 13.852c2.792.907 4.905 2.555 6.337 4.944 1.432 2.391 2.149 5.196 2.149 8.419 0 3.985-1.048 7.335-3.143 10.05C53.742 42.642 51.029 44 47.7 44c-2.507 0-4.691-.806-6.552-2.417-1.862-1.611-3.24-3.793-4.136-6.546l4.403-1.846c.646 1.666 1.496 2.979 2.552 3.938 1.056.96 2.3 1.438 3.733 1.438 1.504 0 2.775-.85 3.813-2.552 1.039-1.703 1.558-3.747 1.558-6.14 0-2.643-.556-4.69-1.664-6.138-1.29-1.701-3.314-2.554-6.071-2.554h-2.148v-2.606l7.52-13.147H41.63l-.516.889-11.04 37.678h-.536L21.48 16.73l-8.056 27.268h-.537L0 0h5.64l7.787 26.78 5.264-18.033L16.113 0zM87.958 0c-1.077 0-2.044.388-2.777 1.133-.777.79-1.21 1.81-1.21 2.866s.412 2.034 1.167 2.8C85.905 7.579 86.892 8 87.959 8c1.043 0 2.055-.422 2.843-1.188.755-.733 1.166-1.711 1.166-2.811a3.997 3.997 0 00-1.155-2.811A3.946 3.946 0 0087.958 0zm3.476 4.034a3.32 3.32 0 01-1.01 2.41c-.69.668-1.544 1.023-2.489 1.023a3.405 3.405 0 01-2.42-1.033c-.655-.667-1.022-1.523-1.022-2.433 0-.911.378-1.8 1.055-2.489.633-.645 1.488-.988 2.42-.988.955 0 1.81.356 2.477 1.033.645.643.99 1.51.99 2.477zm-3.366-2.378h-1.71v4.533h.855V4.256h.845l.922 1.933h.955l-1.012-2.066c.655-.134 1.033-.578 1.033-1.223 0-.822-.621-1.244-1.888-1.244zm-.155.555c.8 0 1.165.222 1.165.778 0 .533-.365.722-1.144.722h-.722v-1.5zM82.109 0l.862 5.914-3.05 6.588s-1.172-2.795-3.118-4.342c-1.64-1.303-2.708-1.586-4.378-1.198-2.145.5-4.577 3.394-5.638 6.963-1.27 4.27-1.283 6.336-1.328 8.234-.071 3.042.354 4.841.354 4.841s-1.853-3.868-1.835-9.533c.012-4.043.576-7.71 2.233-11.328 1.459-3.181 3.626-5.09 5.55-5.315 1.99-.232 3.562.85 4.777 2.02 1.276 1.23 2.565 3.918 2.565 3.918zM82.202 31.824s-1.338 2.567-2.171 3.556c-.834.99-2.326 2.732-4.167 3.603-1.842.872-2.808 1.036-4.628.849-1.82-.188-3.51-1.319-4.102-1.79-.592-.472-2.106-1.861-2.962-3.156C63.317 33.59 61.98 31 61.98 31s.745 2.596 1.212 3.698c.269.635 1.094 2.574 2.265 4.262 1.092 1.576 3.214 4.287 6.438 4.899 3.224.613 5.44-.942 5.987-1.319.549-.376 1.704-1.416 2.436-2.256.763-.877 1.486-1.995 1.886-2.666.292-.49.768-1.485.768-1.485z"></path>
</g>
</g>
</svg></a><a href="http://w3.org/WAI/" aria-label="Web Accessibility Initiative">
<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 162.5 45.9" style="margin: 0.75em 0 0.75em 0.5em">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h162.5v45.9H0z" fill="#015a9c"></path>
<path d="M1.2 24.5h160" stroke="#eed009" stroke-linecap="square" stroke-width="2"></path>
<g fill="#fff" fill-rule="nonzero">
<path d="M15.741 15.5h-1.816L11.14 6.145c-.41-1.394-.65-2.334-.722-2.823-.104.749-.332 1.71-.684 2.881L7.04 15.5H5.223L1.444 1.223H3.32l2.217 8.72c.3 1.14.527 2.272.684 3.399.143-1.068.397-2.237.761-3.506l2.52-8.613h1.855l2.627 8.681c.339 1.127.6 2.272.781 3.438.105-.899.336-2.038.694-3.418l2.207-8.701h1.875zm10.127.195c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.372-2.312-1.372-4.018 0-1.719.426-3.088 1.279-4.107.853-1.019 2.005-1.528 3.457-1.528 1.348 0 2.422.435 3.223 1.304.8.869 1.2 2.046 1.2 3.53v1.064h-7.343c.033 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.631-.151c.514-.101 1.116-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.521.104-1.136.156-1.846.156zm-.44-9.677c-.84 0-1.503.27-1.992.81-.488.54-.778 1.292-.869 2.256h5.46c-.014-1.003-.245-1.764-.694-2.285-.45-.521-1.084-.781-1.904-.781zm12.237-1.416c1.413 0 2.503.486 3.271 1.46.769.973 1.153 2.332 1.153 4.077 0 1.77-.39 3.14-1.172 4.106-.781.967-1.865 1.45-3.252 1.45-.723 0-1.367-.13-1.934-.39a3.384 3.384 0 01-1.386-1.162h-.137a48.165 48.165 0 01-.362 1.357h-1.26V.305h1.759v3.691c0 .736-.033 1.471-.098 2.207h.098c.722-1.068 1.829-1.601 3.32-1.601zm-.293 1.455c-1.08 0-1.856.306-2.324.918-.47.612-.703 1.647-.703 3.105v.078c0 1.465.239 2.512.717 3.14.479.628 1.262.942 2.349.942.963 0 1.681-.353 2.153-1.06.472-.706.708-1.726.708-3.06 0-1.355-.237-2.37-.713-3.048-.475-.677-1.204-1.015-2.187-1.015zM59.286 15.5l-1.719-4.424h-5.664l-1.7 4.424h-1.816l5.577-14.336h1.62L61.152 15.5zM57.03 9.484L55.43 5.158l-.684-2.138c-.195.78-.4 1.494-.615 2.138l-1.621 4.326zm10.137 6.211c-1.543 0-2.744-.473-3.604-1.42-.86-.948-1.289-2.307-1.289-4.078 0-1.797.435-3.182 1.304-4.155.87-.973 2.108-1.46 3.716-1.46.52 0 1.037.054 1.548.161.51.108.932.246 1.264.415l-.537 1.465c-.905-.338-1.676-.508-2.314-.508-1.081 0-1.879.34-2.393 1.02-.514.681-.771 1.695-.771 3.043 0 1.295.257 2.287.771 2.973.514.687 1.276 1.03 2.285 1.03.944 0 1.872-.208 2.783-.624v1.562c-.742.384-1.663.576-2.763.576zm9.6 0c-1.544 0-2.745-.473-3.604-1.42-.86-.948-1.29-2.307-1.29-4.078 0-1.797.435-3.182 1.305-4.155.869-.973 2.107-1.46 3.715-1.46.521 0 1.037.054 1.548.161.511.108.933.246 1.265.415l-.537 1.465c-.905-.338-1.677-.508-2.315-.508-1.08 0-1.878.34-2.392 1.02-.515.681-.772 1.695-.772 3.043 0 1.295.257 2.287.772 2.973.514.687 1.276 1.03 2.285 1.03.944 0 1.872-.208 2.783-.624v1.562c-.742.384-1.663.576-2.764.576zm9.863 0c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.373-2.312-1.373-4.018 0-1.719.427-3.088 1.28-4.107.853-1.019 2.005-1.528 3.457-1.528 1.347 0 2.422.435 3.222 1.304.801.869 1.202 2.046 1.202 3.53v1.064H83.29c.032 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.63-.151c.515-.101 1.117-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.52.104-1.136.156-1.845.156zm-.44-9.677c-.84 0-1.504.27-1.992.81s-.778 1.292-.87 2.256h5.46c-.013-1.003-.244-1.764-.693-2.285-.45-.521-1.084-.781-1.905-.781zm14.14 6.523c0 1.003-.373 1.779-1.122 2.33-.749.55-1.8.824-3.154.824-1.413 0-2.536-.224-3.37-.674V13.42c1.179.573 2.315.86 3.409.86.885 0 1.53-.144 1.933-.43.404-.287.606-.671.606-1.153 0-.423-.194-.781-.581-1.074-.388-.293-1.076-.628-2.066-1.006-1.009-.39-1.719-.724-2.129-1-.41-.277-.711-.588-.903-.933-.192-.345-.288-.765-.288-1.26 0-.88.358-1.572 1.074-2.08.716-.508 1.7-.762 2.95-.762a8.17 8.17 0 013.417.723L99.511 6.7c-1.088-.456-2.068-.683-2.94-.683-.73 0-1.282.115-1.66.346-.378.231-.566.549-.566.952 0 .391.162.715.488.972.325.257 1.084.614 2.275 1.07.892.331 1.551.64 1.978.927.426.287.74.609.942.967.202.358.303.788.303 1.289zm9.58 0c0 1.003-.373 1.779-1.122 2.33-.749.55-1.8.824-3.154.824-1.413 0-2.536-.224-3.37-.674V13.42c1.179.573 2.315.86 3.409.86.885 0 1.53-.144 1.933-.43.404-.287.606-.671.606-1.153 0-.423-.194-.781-.581-1.074-.388-.293-1.076-.628-2.066-1.006-1.009-.39-1.719-.724-2.129-1-.41-.277-.71-.588-.903-.933-.192-.345-.288-.765-.288-1.26 0-.88.358-1.572 1.074-2.08.716-.508 1.7-.762 2.95-.762a8.17 8.17 0 013.417.723l-.595 1.396c-1.088-.456-2.067-.683-2.94-.683-.729 0-1.282.115-1.66.346-.378.231-.566.549-.566.952 0 .391.162.715.488.972.325.257 1.084.614 2.275 1.07.892.331 1.551.64 1.978.927.426.287.74.609.942.967.202.358.303.788.303 1.289zm4.356 2.959h-1.757V4.777h1.757zm-1.894-13.623c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.273 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zm10.371 2.725c1.413 0 2.503.486 3.271 1.46.769.973 1.153 2.332 1.153 4.077 0 1.77-.39 3.14-1.172 4.106-.781.967-1.865 1.45-3.252 1.45-.723 0-1.367-.13-1.934-.39a3.384 3.384 0 01-1.386-1.162h-.137a48.244 48.244 0 01-.361 1.357h-1.26V.305h1.758v3.691c0 .736-.033 1.471-.098 2.207h.098c.722-1.068 1.83-1.601 3.32-1.601zm-.293 1.455c-1.08 0-1.855.306-2.324.918-.469.612-.703 1.647-.703 3.105v.078c0 1.465.239 2.512.717 3.14.479.628 1.262.942 2.35.942.963 0 1.68-.353 2.152-1.06.472-.706.708-1.726.708-3.06 0-1.355-.237-2.37-.713-3.048-.475-.677-1.204-1.015-2.187-1.015zm9.277 9.443h-1.757V4.777h1.757zm-1.894-13.623c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.273 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zm7.05 13.623h-1.757V.305h1.758zm5.157 0h-1.758V4.777h1.758zm-1.895-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.198-.183-.298-.466-.298-.85zm8.877 12.383c.228 0 .495-.023.801-.069.306-.045.537-.097.693-.156v1.348c-.162.071-.415.141-.756.21a5.29 5.29 0 01-1.04.102c-2.097 0-3.145-1.103-3.145-3.31v-6.24h-1.514v-.84l1.534-.703.703-2.286h1.045v2.461h3.095v1.368h-3.095v6.19c0 .62.148 1.095.444 1.427.296.332.708.498 1.235.498zm1.953-9.483h1.885l2.315 6.104c.488 1.328.787 2.301.898 2.92h.078c.059-.241.192-.692.4-1.353.209-.66.385-1.19.528-1.587l2.178-6.084h1.894l-4.619 12.207c-.45 1.185-.983 2.035-1.602 2.55-.618.514-1.383.77-2.294.77-.489 0-.974-.055-1.456-.165v-1.397c.326.078.717.117 1.172.117.56 0 1.035-.154 1.426-.463.39-.31.71-.787.957-1.431l.557-1.426zM7.157 45.5H2.001v-1.035l1.68-.381V32.658l-1.68-.4v-1.035h5.156v1.035l-1.68.4v11.426l1.68.38zm9.824 0v-6.855c0-.873-.193-1.522-.58-1.949-.388-.426-.995-.64-1.822-.64-1.1 0-1.9.305-2.398.914-.498.608-.747 1.6-.747 2.973V45.5H9.677V34.777h1.416l.263 1.465h.098a3.31 3.31 0 011.396-1.225 4.492 4.492 0 011.983-.435c1.315 0 2.292.319 2.93.957.638.638.957 1.63.957 2.979V45.5zm6.817 0H22.04V34.777h1.758zm-1.895-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM30.78 44.26c.228 0 .495-.023.8-.069.307-.045.538-.097.694-.156v1.348c-.163.071-.415.141-.757.21a5.29 5.29 0 01-1.04.102c-2.096 0-3.144-1.103-3.144-3.31v-6.24h-1.514v-.84l1.533-.703.703-2.286H29.1v2.461h3.096v1.368H29.1v6.19c0 .62.149 1.095.445 1.427.296.332.708.498 1.235.498zm5.39 1.24h-1.757V34.777h1.758zm-1.894-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM46.19 45.5l-.342-1.523h-.078c-.534.67-1.066 1.124-1.596 1.362-.53.237-1.2.356-2.007.356-1.055 0-1.882-.276-2.48-.83-.6-.553-.9-1.334-.9-2.344 0-2.174 1.716-3.313 5.147-3.417l1.817-.069V38.4c0-.813-.176-1.414-.528-1.801-.351-.388-.914-.581-1.689-.581-.566 0-1.102.084-1.606.253-.505.17-.979.359-1.421.567l-.537-1.318a7.958 7.958 0 011.767-.674 7.642 7.642 0 011.895-.244c1.295 0 2.259.286 2.89.859.632.573.948 1.484.948 2.734V45.5zm-3.623-1.22c.983 0 1.756-.266 2.32-.797.563-.53.844-1.284.844-2.26v-.967l-1.582.068c-1.23.046-2.127.241-2.69.586-.563.345-.845.889-.845 1.631 0 .56.171.99.513 1.29.342.299.822.448 1.44.448zm11.807-.02c.228 0 .495-.023.8-.069.307-.045.538-.097.694-.156v1.348c-.163.071-.415.141-.757.21a5.29 5.29 0 01-1.04.102c-2.096 0-3.144-1.103-3.144-3.31v-6.24h-1.514v-.84l1.533-.703.703-2.286h1.045v2.461h3.096v1.368h-3.096v6.19c0 .62.148 1.095.444 1.427.297.332.708.498 1.236.498zm5.39 1.24h-1.757V34.777h1.757zM57.87 31.877c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM65.526 45.5l-4.062-10.723h1.884l2.276 6.319c.45 1.27.736 2.216.86 2.842h.077a11.495 11.495 0 01.176-.64c.04-.127.28-.861.723-2.202l2.285-6.319h1.875L67.548 45.5zm12.354.195c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.373-2.312-1.373-4.018 0-1.719.427-3.088 1.28-4.107.853-1.019 2.005-1.528 3.457-1.528 1.347 0 2.422.435 3.222 1.304.801.869 1.202 2.046 1.202 3.53v1.064H74.54c.032 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.63-.151c.515-.101 1.117-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.52.104-1.136.156-1.845.156zm-.44-9.677c-.84 0-1.504.27-1.992.81s-.778 1.292-.87 2.256h5.46c-.013-1.003-.244-1.764-.693-2.285-.45-.521-1.084-.781-1.905-.781zM137.741 45.5h-1.816l-2.784-9.355c-.41-1.394-.65-2.334-.722-2.823-.104.749-.332 1.71-.684 2.881L129.04 45.5h-1.817l-3.779-14.277h1.875l2.217 8.72c.3 1.14.527 2.272.684 3.399.143-1.068.397-2.237.761-3.506l2.52-8.613h1.855l2.627 8.681c.339 1.127.6 2.272.781 3.438.105-.899.336-2.038.694-3.418l2.207-8.701h1.875zm14.57 0l-1.718-4.424h-5.664l-1.7 4.424h-1.816l5.576-14.336h1.621l5.567 14.336zm-2.256-6.016l-1.601-4.326-.684-2.138c-.195.78-.4 1.494-.615 2.138l-1.621 4.326zm10.098 6.016h-5.156v-1.035l1.68-.381V32.658l-1.68-.4v-1.035h5.156v1.035l-1.68.4v11.426l1.68.38z"></path>
</g>
</g>
</svg></a></div>
</div>
</div>
<div class="default-grid nav-container nav-page-specific">
<div class="nav">
<nav class="nav standalone-resource-pager" aria-label="Understanding Docs">
<ul>
<li class="nav__item"><a href=".">
All Understanding Docs
</a></li>
<li class="nav__item"><a href="distinguishable">
<svg alt="up" focusable="false" aria-hidden="true" class="icon-arrow-up-thin pager-icon" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"></path>
</svg> Guideline: Distinguishable</a></li>
<li class="nav__item"><a href="low-or-no-background-audio">
<svg focusable="false" aria-hidden="true" class="icon-arrow-left-thin pager-icon" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"></path>
</svg>Previous SC: Low or No Background Audio</a></li>
<li class="nav__item"><a href="images-of-text-no-exception">Next SC: Images of Text (No Exception)
<svg focusable="false" aria-hidden="true" class="icon-arrow-right-thin pager-icon" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"></path>
</svg></a></li>
</ul>
</nav>
</div>
</div>
<div class="default-grid with-gap leftcol">
<aside class="box nav-hack sidebar standalone-resource__sidebar ">
<nav>
<header class="box-h ">Page Contents</header>
<div class="box-i">
<ul>
<li><a href="#brief">In Brief</a></li>
<li><a href="#intent">Intent</a></li>
<li><a href="#benefits">Benefits</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#resources">Related Resources</a></li>
<li><a href="#techniques">Techniques</a></li>
<li><a href="#key-terms">Key Terms</a></li>
</ul>
</div>
</nav>
</aside>
<main id="main" class="standalone-resource__main">
<h1><span class="standalone-resource__type-of-guidance">Understanding
SC 1.4.8:</span>Visual Presentation (Level AAA)
</h1>
<aside class="box">
<header class="box-h box-h-icon">Success Criterion (SC) </header>
<div class="box-i">
<p>For the visual presentation of <a href="#dfn-blocks-of-text">blocks of text</a>, a <a href="#dfn-mechanism">mechanism</a> is available to achieve the following:
</p>
<ul>
<li>Foreground and background colors can be selected by the user.</li>
<li>Width is no more than 80 characters or glyphs (40 if CJK).</li>
<li>Text is not justified (aligned to both the left and the right margins).</li>
<li>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.
</li>
<li>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="#dfn-on-a-full-screen-window">on a full-screen window</a>.
</li>
</ul>
<div class="note">
<p class="note-title marker">Note</p>
<p>Content is not required to use these values. The requirement is that a mechanism is
available for users to change these presentation aspects. The mechanism can be provided
by the browser or other user agent. Content is not required to provide the mechanism.
</p>
</div>
<div class="note">
<p class="note-title marker">Note</p>
<p>Writing systems for some languages use different presentation aspects to improve readability
and legibility. If a presentation aspect in this success criterion is not used in
a writing system, content in that writing system does not need to use that presentation
setting and can conform without it. Authors are encouraged to follow guidance for
improving readability and legibility of text in their writing system.
</p>
</div>
</div>
</aside>
<div class="excol-all"></div>
<section id="brief">
<h2>In Brief</h2>
<dl>
<dt>Goal</dt>
<dd>Text appearance can be altered by users to meet preferences.</dd>
<dt>What to do</dt>
<dd>Meet text display requirements or allow users to adjust them.</dd>
<dt>Why it's important</dt>
<dd>Some text formats are more readable for people with cognitive disabilities and low
vision.
</dd>
</dl>
</section>
<section id="intent">
<h2>Intent</h2>
<p>The intent of this Success Criterion is to ensure that visually rendered text is
presented in such a manner that it can be perceived without its layout interfering
with its readability. People with some cognitive, language and learning disabilities
and some low vision users cannot perceive the text and/or lose their reading place
if the text is presented in a manner that is difficult for them to read.
</p>
<p>People with some visual or cognitive disabilities need to be able to select the color
of text and the color of the background. They sometimes choose combinations that
seem unintuitive to someone without that disability. Sometimes these combinations
have very low contrast. Sometimes only very specific color combinations work for
them. Control of color or other aspects of text presentation makes a huge difference
to their comprehension.
</p>
<p>For people with some reading or vision disabilities, long lines of text can become
a significant barrier. They have trouble keeping their place and following the flow
of text. Having a narrow block of text makes it easier for them to continue on to
the next line in a block. Lines should not exceed 80 characters or glyphs (40 if
CJK), where glyphs are the element of writing in the writing system for the text.
Studies
have shown that Chinese, Japanese and Korean (CJK) characters are approximately twice
as wide as non-CJK characters when both types of characters are displayed with characteristics
that achieve the same readability, so the maximum line width for CJK characters is
half that of non-CJK characters.
</p>
<p>People with some cognitive disabilities find it difficult to track text where the
lines are close together. Providing extra space between lines and paragraphs allows
them to better track the next line and to recognize when they have reached the end
of a paragraph. It is best if there are several different options, for instance, space-and-a-half
and double spacing for line spacing. By space and a half within paragraphs we mean
that top of one line is 150% further from the top of the line below it than would
be true when the text is 'single spaced' (the default spacing for the font). By Paragraph
spacing that is 1.5 times larger than the line spacing we mean that the spacing from
the top of the last line of 1 paragraph is 250% farther from the Top of the first
line of the next paragraph (i.e., that there is a blank line between the two paragraphs
that is 150% of the single space blank line).
</p>
<p>People with certain cognitive disabilities have problems reading text that is both
left and right justified. The uneven spacing between words in fully justified text
can cause "rivers of white" space to run down the page making reading difficult and
in some cases impossible. Text justification can also cause words to be spaced closely
together, so that it is difficult for them to locate word boundaries.
</p>
<p>The resizing provision ensures that visually rendered text (text characters that have
been displayed so that they can be seen [vs. text characters that are still in data
form such as ASCII]) can be scaled successfully without requiring that the user
scroll left and right to see all of the content. When the content has been authored
so that this is possible, the content is said to reflow. This permits people with
low vision and people with cognitive disabilities to increase the size of the text
without becoming disoriented.
</p>
<p>The scaling of content is primarily a user agent responsibility. User agents that
satisfy UAAG 1.0 Checkpoint 4.1 allow users to configure text scale. The author's
responsibility is to create Web content that does not prevent the user agent from
scaling the content and that allows the reflow of the content within the current
width of the viewport. See
<a href="resize-text">1.4.4: Resize Text</a> for additional discussion of resizing text.
</p>
<p>The horizontal scrolling requirement is not intended to apply to small-screen devices
where long words may be displayed on a single line and require users to scroll horizontally.
For the purposes of this requirement, authors should ensure that content meets this
requirement on standard desktop/laptop displays with the browser window maximized.
Since people generally keep their computers for several years, it is best not to rely
on the latest desktop/laptop display resolutions but to consider the common desktop/laptop
display resolutions over the course of several years when making this evaluation.
</p>
<p>Wrapping should always be possible as long as words are not so long that a single
word is more than half the width of a full screen. Very long URIs may run off the
side of an enlarged screen, but they would not be considered text
for "reading" and, therefore, would not violate this provision.
</p>
<p>This provision does not mean that a user would never need to use horizontal scrolling.
It only means that they would not need to use horizontal scrolling back and forth
to read a line of text. For example, if a page consisted of two equal sized columns
of text, it would automatically meet this provision. Enlarging the page would mean
that the first column was completely on screen and the user could just scroll vertically
down the page to read it. To read the second column, they would horizontally scroll
to the right, where the right hand column would then fit entirely within the width
of the screen, and read that column without further horizontal scrolling.
</p>
</section>
<section id="benefits">
<h2>Benefits</h2>
<p>This Success Criterion helps low vision users by letting them see text without distracting
presentational features. It lets them configure text in ways that will be easier
for them to see by letting them control the color and size of blocks of text.
</p>
<p>This Success Criterion helps people with cognitive, language and learning disabilities
perceive text and track their location within blocks of text.
</p>
<ul>
<li>People with some cognitive disabilities can read text better when they select their
own foreground and background color combinations.
</li>
<li>People with some cognitive disabilities can track their locations more easily when
blocks of text are narrow and when they can configure the amount of space between
lines and paragraphs.
</li>
<li>People with some cognitive disabilities can read text more easily when the spacing
between words is regular.
</li>
</ul>
</section>
<section id="examples">
<h2>Examples</h2>
<figure id="figure-text-cut">
<figcaption>Figure 1 The following images show examples of single-spacing, space-and-a-half and double-spaced
text in a paragraph.
</figcaption>
<img src="img/single-space.gif" alt="Example of single-spaced text. (no space between each line of text)" />
<img src="img/space-and-a-half.gif" alt="Example of space-and-a-half text. (a space equal to half the height of a line of text line)" />
<img src="img/double-space.gif" alt="Example of double-spaced text. (a space equal to the height of a line of text between each line)" />
</figure>
<p>Examples of glyphs include "A", "→" (an arrow symbol), and "さ" (a Japanese character).</p>
</section>
<section id="resources">
<h2>Related Resources</h2>
<p>Resources are for information purposes only, no endorsement implied.</p>
<ul>
<li>
<a href="https://www.w3.org/TR/CSS2/box.html">CSS 2 Box Model</a>
</li>
<li>
<a href="https://www.w3.org/TR/CSS2/visuren.html">CSS 2 Visual formatting Model</a>
</li>
<li>
<a href="https://www.w3.org/TR/CSS2/visudet.html">CSS 2 Visual formatting Model Details</a>
</li>
<li>
<a href="https://web.archive.org/web/20050419043926/http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/">About fluid and fixed width layouts</a>
</li>
<li>
<a href="http://cookiecrook.com/AIR/2003/train/accessiblecss.php">Accessible CSS</a>
</li>
<li>
<a href="https://practicaltypography.com/line-length.html">Practical Typography - Line Length</a>
</li>
<li>
<a href="http://juicystudio.com/article/cognitive-impairment.php">Developing sites for users with Cognitive disabilities and learning difficulties</a>
</li>
<li>
<a href="https://www.w3.org/TR/2007/WD-xhtml-rdfa-primer-20071026/">RDFA Primer</a>
</li>
<li>
<a href="https://web.archive.org/web/20030407195127/http://publications.nr.no/Multifunk-NR-rapport.pdf">MULTIFUNK: Bringing computer-supported reading one step further</a>, Date: April 2002, ISBN: 82-539-0491-6, Author: Gjertrud W. Kamstrup, Eva Mjøvik,
Anne-Lise Rygvold og Bjørn Gunnar Saltnes
</li>
<li>
<a href="http://eric.ed.gov/?id=EJ601947">Effective Monitor Display Design</a> on the ERIC Web portal
</li>
<li>
<a href="http://www.sigaccess.org/2005/09/september-2005-newsletter/">Cognitive difficulties and access to information systems - an interaction design perspective</a>", Peter Gregor and Anna Dickinson, Applied Computing, University of Dundee
</li>
<li>Legge, G.E., Pelli, D.G., Rubin, G.S., & Schleske, M.M.:Psychophysics of reading.
I. Normal Vision,Vision Research, 25, 239-252, 1985.
</li>
<li>Legge, G.E., Rubin, G.S., Pelli, D.G., & Schleske, M.M.:Psychophysics of reading.
II. Low Vision,Vision Research, 25, 253-266, 1985.
</li>
<li>Osaka,N. and Oda, K. (1991). Effective visual field size necessary for vertical reading
during Japanese text processing. Bulletin of Psychonomic Society,29(4),345-347.
</li>
<li>Beckmann, P.J. & Legge, G.E. (1996). Psychophysics of reading. XIV. The page-navigation
problem in using magnifiers. Vision Research, 36, 3723-3733.
</li>
<li lang="jp">
川嶋英嗣・小田浩一(2003).読書におけるスクロール方向とウィンドウ幅の影響 日本心理学会第67回大会, 502.
</li>
<li lang="jp">
小田浩一・今橋真理子(1995). 文字認知の閾値と読みの閾値. VISION, 7,
165-168.
</li>
<li>Osaka,N. (1994). Size of saccade and fixation duration of eye movements during reading:
psychophysics of Japanese text processing. Journal of Optical Society of America A,
9(1), 5-13.
</li>
<li lang="jp">
山中今日子・小田浩一 (2007). 漢字の画数と書体のウェイトが視認性に及ぼす
影響. 視覚学会2007年夏季大会ポスター 1p1 Vision, P.167.
</li>
<li>
<a href="http://paul-m-jones.com/post/2008/03/09/line-length-volume-and-density/">Line Length, Volume, and Density</a>
</li>
<li>
<a href="http://webarchive.nationalarchives.gov.uk/20130812104657/http://odi.dwp.gov.uk/inclusive-communications/channels/publishing.php">Guidance on accessible publishing</a>
</li>
<li>
<a href="http://usability.com.au/2004/12/an-accessibility-frontier-cognitive-disabilities-and-learning-difficulties-2004/"> An Accessibility Frontier: Cognitive disabilities and learning difficulties</a>
</li>
<li>
<a href="http://leftbrainrightbrain.co.uk/2005/03/08/cognitiveperceptual-difference-and-good-web-design/">Cognitive/Perceptual Difference And Good Web Design</a>
</li>
<li>
<a href="http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/">6 Surprising Bad Practices That Hurt Dyslexic Users</a>
</li>
<li>
<a href="https://web.archive.org/web/20070313232158/http://accessites.org/site/2006/11/designing-for-dyslexics-part-3-of-3/">Design for Dyslexics</a>
</li>
<li>
<a href="http://www.dyslexia.com/library/webdesign.htm">Web Design for Dyslexia</a>
</li>
</ul>
</section>
<section id="techniques">
<h2>Techniques</h2>
<p>Each numbered item in this section represents a technique or combination of techniques
that the WCAG Working Group deems sufficient for meeting this Success Criterion. However,
it is not necessary to use these particular techniques. For information on using other
techniques, see <a href="understanding-techniques">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.
</p>
<section id="sufficient">
<h3>Sufficient Techniques</h3>
<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>
<section id="">
<ul>
<li>
<a class="css" href="https://w3c.github.io/wcag/techniques/css/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> OR
</li>
<li>
<a class="css" href="https://w3c.github.io/wcag/techniques/css/C25">C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying
text and text-background colors</a> OR
</li>
<li>
<a class="general" href="https://w3c.github.io/wcag/techniques/general/G156">G156: Using a technology that has commonly-available user agents that can change the foreground
and background of blocks of text</a> OR
</li>
<li>
<a class="general" href="https://w3c.github.io/wcag/techniques/general/G148">G148: Not specifying background color, not specifying text color, and not using technology
features that change those defaults</a> OR
</li>
<li>
<a class="general" href="https://w3c.github.io/wcag/techniques/general/G175">G175: Providing a multi color selection tool on the page for foreground and background colors</a>
</li>
</ul>
</section>
<section id="">
<ul>
<li>
<a class="general" href="https://w3c.github.io/wcag/techniques/general/G204">G204: Not interfering with the user agent's reflow of text as the viewing window is narrowed</a> OR
</li>
<li>
<a class="css" href="https://w3c.github.io/wcag/techniques/css/C20">C20: Using relative measurements to set column widths so that lines can average 80 characters
or less when the browser is resized</a>
</li>
</ul>
</section>
<section id="">
<ul>
<li>
<a class="css" href="https://w3c.github.io/wcag/techniques/css/C19">C19: Specifying alignment either to the left or right in CSS</a> OR
</li>
<li>
<a class="general" href="https://w3c.github.io/wcag/techniques/general/G172">G172: Providing a mechanism to remove full justification of text</a> OR
</li>
<li>
<a class="general" href="https://w3c.github.io/wcag/techniques/general/G169">G169: Aligning text on only one side</a>
</li>
</ul>
</section>
<section id="">
<ul>
<li>
<a class="general" href="https://w3c.github.io/wcag/techniques/general/G188">G188: Providing a button on the page to increase line spaces and paragraph spaces</a> OR
</li>
<li>
<a class="css" href="https://w3c.github.io/wcag/techniques/css/C21">C21: Specifying line spacing in CSS</a>
</li>
</ul>
</section>
<section id="">
<ul>
<li>
<a class="general" href="https://w3c.github.io/wcag/techniques/general/G204">G204: Not interfering with the user agent's reflow of text as the viewing window is narrowed</a> OR
</li>
<li>
<p>
<a class="general" href="https://w3c.github.io/wcag/techniques/general/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>
<a class="css" href="https://w3c.github.io/wcag/techniques/css/C12">C12: Using percent for font sizes</a> OR
</li>
<li>
<a class="css" href="https://w3c.github.io/wcag/techniques/css/C13">C13: Using named font sizes</a> OR
</li>
<li>
<a class="css" href="https://w3c.github.io/wcag/techniques/css/C14">C14: Using em units for font sizes</a> OR
</li>
<li>
<a class="css" href="https://w3c.github.io/wcag/techniques/css/C24">C24: Using percentage values in CSS for container sizes</a> OR
</li>
<li>
<a class="script" href="https://w3c.github.io/wcag/techniques/client-side-script/SCR34">SCR34: Calculating size and position in a way that scales with text size</a> OR
</li>
</ul>
</li>
<li>
<a class="general" href="https://w3c.github.io/wcag/techniques/general/G206">G206: 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>
</li>
</ul>
</section>
</section>
<section id="failure">
<h3>Failures</h3>
<p>The following are common mistakes that are considered failures of this Success Criterion
by the WCAG Working Group.
</p>
<ul>
<li>
<a class="failure" href="https://w3c.github.io/wcag/techniques/failures/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>
</li>
<li>
<a class="failure" href="https://w3c.github.io/wcag/techniques/failures/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>
</li>
</ul>
</section>
</section>
<section id="key-terms">
<details>
<summary>
<h2>Key Terms</h2>
</summary>
<dt id="dfn-assistive-technology">assistive technology</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">hardware and/or software that acts as a <a href="#dfn-user-agent">user agent</a>, or along with a mainstream user agent, to provide functionality to meet the requirements
of users with disabilities that go beyond those offered by mainstream user agents
</p>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<p class="note-title marker">Note</p>
<p>Functionality provided by assistive technology includes alternative presentations
(e.g., as synthesized speech or magnified content), alternative input methods (e.g.,
voice), additional navigation or orientation mechanisms, and content transformations
(e.g., to make tables more accessible).
</p>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<p class="note-title marker">Note</p>
<p>Assistive technologies often communicate data and messages with mainstream user agents
by using and monitoring APIs.
</p>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<p class="note-title marker">Note</p>
<p>The distinction between mainstream user agents and assistive technologies is not absolute.
Many mainstream user agents provide some features to assist individuals with disabilities.
The basic difference is that mainstream user agents target broad and diverse audiences
that usually include people with and without disabilities. Assistive technologies
target narrowly defined populations of users with specific disabilities. The assistance
provided by an assistive technology is more specific and appropriate to the needs
of its target users. The mainstream user agent may provide important functionality
to assistive technologies like retrieving Web content from program objects or parsing
markup into identifiable bundles.
</p>
</div>
<aside xmlns="http://www.w3.org/1999/xhtml" class="example">
<p>Assistive technologies that are important in the context of this document include
the following:
</p>
<ul>
<li>screen magnifiers, and other visual reading assistants, which are used by people with
visual, perceptual and physical print disabilities to change text font, size, spacing,
color, synchronization with speech, etc. in order to improve the visual readability
of rendered text and images;
</li>
<li>screen readers, which are used by people who are blind to read textual information
through synthesized speech or braille;
</li>
<li>text-to-speech software, which is used by some people with cognitive, language, and
learning disabilities to convert text into synthetic speech;
</li>
<li>speech recognition software, which may be used by people who have some physical disabilities;</li>
<li>alternative keyboards, which are used by people with certain physical disabilities
to simulate the keyboard (including alternate keyboards that use head pointers, single
switches, sip/puff and other special input devices.);
</li>
<li>alternative pointing devices, which are used by people with certain physical disabilities
to simulate mouse pointing and button activations.
</li>
</ul>
</aside>
</definition>
</dd>
<dt id="dfn-blocks-of-text">blocks of text</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">more than one sentence of text</p>
</definition>
</dd>
<dt id="dfn-conformance">conformance</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">satisfying all the requirements of a given standard, guideline or specification</p>
</definition>
</dd>
<dt id="dfn-mechanism">mechanism</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">
<a href="#dfn-process">process</a> or technique for achieving a result
</p>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<p class="note-title marker">Note</p>
<p>The mechanism may be explicitly provided in the content, or may be <a href="#dfn-relied-upon">relied upon</a> to be provided by either the platform or by <a href="#dfn-user-agent">user agents</a>, including <a href="#dfn-assistive-technology">assistive technologies</a>.
</p>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<p class="note-title marker">Note</p>
<p>The mechanism needs to meet all success criteria for the conformance level claimed.</p>
</div>
</definition>
</dd>
<dt id="dfn-on-a-full-screen-window">on a full-screen window</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">on the most common sized desktop/laptop display with the viewport maximized</p>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<p class="note-title marker">Note</p>
<p>Since people generally keep their computers for several years, it is best not to rely
on the latest desktop/laptop display resolutions but to consider the common desktop/laptop
display resolutions over the course of several years when making this evaluation.
</p>
</div>
</definition>
</dd>
<dt id="dfn-process">process</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">series of user actions where each action is required in order to complete an activity</p>
<aside xmlns="http://www.w3.org/1999/xhtml" class="example">
<p>Successful use of a series of Web pages on a shopping site requires users to view
alternative products, prices and offers, select products, submit an order, provide
shipping information and provide payment information.
</p>
</aside>
<aside xmlns="http://www.w3.org/1999/xhtml" class="example">
<p>An account registration page requires successful completion of a <a href="https://www.w3.org/TR/turingtest/">Turing test</a> before
the registration form can be accessed.
</p>
</aside>
</definition>
</dd>
<dt id="dfn-relied-upon">relied upon</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">the content would not <a href="#dfn-conformance">conform</a> if that <a href="#dfn-technology">technology</a> is turned off or is not supported
</p>
</definition>
</dd>
<dt id="dfn-technology">technology</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">
<a href="#dfn-mechanism">mechanism</a> for encoding instructions to be rendered, played or executed by <a href="#dfn-user-agent">user agents</a>
</p>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<p class="note-title marker">Note</p>
<p>As used in these guidelines "Web Technology" and the word "technology" (when used
alone) both refer to Web Content Technologies.
</p>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<p class="note-title marker">Note</p>
<p>Web content technologies may include markup languages, data formats, or programming
languages that authors may use alone or in combination to create end-user experiences
that range from static Web pages to synchronized media presentations to dynamic Web
applications.
</p>
</div>
<aside xmlns="http://www.w3.org/1999/xhtml" class="example">
<p>Some common examples of Web content technologies include HTML, CSS, SVG, PNG, PDF,
Flash, and JavaScript.
</p>
</aside>
</definition>
</dd>
<dt id="dfn-user-agent">user agent</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">any software that retrieves and presents Web content for users</p>
<aside xmlns="http://www.w3.org/1999/xhtml" class="example">
<p>Web browsers, media players, plug-ins, and other programs — including <a href="#dfn-assistive-technology">assistive technologies</a> — that help in retrieving, rendering, and interacting with Web content.
</p>
</aside>
</definition>
</dd>
</details>
</section><a class="button button-backtotop" href="#top"><span>
<svg focusable="false" aria-hidden="true" class="icon-arrow-up " viewBox="0 0 26 28">
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
</svg> Back to Top
</span></a></main>
<aside class="box box-icon box-space-above" id="helpimprove" style="grid-column: 2 / 8; grid-row: 3">
<header class="box-h box-h-icon box-h-space-above box-h-icon">
<svg focusable="false" aria-hidden="true" class="icon-comments" viewBox="0 0 28 28">
<path d="M22 12c0 4.422-4.922 8-11 8-0.953 0-1.875-0.094-2.75-0.25-1.297 0.922-2.766 1.594-4.344 2-0.422 0.109-0.875 0.187-1.344 0.25h-0.047c-0.234 0-0.453-0.187-0.5-0.453v0c-0.063-0.297 0.141-0.484 0.313-0.688 0.609-0.688 1.297-1.297 1.828-2.594-2.531-1.469-4.156-3.734-4.156-6.266 0-4.422 4.922-8 11-8s11 3.578 11 8zM28 16c0 2.547-1.625 4.797-4.156 6.266 0.531 1.297 1.219 1.906 1.828 2.594 0.172 0.203 0.375 0.391 0.313 0.688v0c-0.063 0.281-0.297 0.484-0.547 0.453-0.469-0.063-0.922-0.141-1.344-0.25-1.578-0.406-3.047-1.078-4.344-2-0.875 0.156-1.797 0.25-2.75 0.25-2.828 0-5.422-0.781-7.375-2.063 0.453 0.031 0.922 0.063 1.375 0.063 3.359 0 6.531-0.969 8.953-2.719 2.609-1.906 4.047-4.484 4.047-7.281 0-0.812-0.125-1.609-0.359-2.375 2.641 1.453 4.359 3.766 4.359 6.375z"></path>
</svg>
<h2> Help improve this page </h2>
</header>
<div class="box-i">
<p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived
list <a href="mailto:[email protected]?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D">[email protected]@w3.org</a> or via GitHub
</p>
<div class="button-group"><a href="mailto:[email protected]?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D" class="button"><span>E-mail</span></a><a href="https://github.com/w3c/wcag/issues/" class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wcag/issues/new" class="button"><span>New GitHub Issue</span></a></div>
</div>
</aside>
</div>
<footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page">
<div class="inner" style="grid-column: 2 / 8">
<p><strong>Date:</strong> Updated 14 February 2024.
</p>
<p><strong>Developed by</strong> <a href="https://www.w3.org/groups/wg/ag/participants">Accessibility Guidelines Working Group (AG WG) Participants</a> (Co-Chairs: Alastair Campbell, Charles Adams, Rachael Bradley Montgomery. W3C Staff
Contact: Michael Cooper).
</p>
<p>The content was developed as part of the <a href="https://www.w3.org/WAI/about/projects/#us">WAI-Core projects</a> funded by U.S. Federal funds. The user interface was designed by the Education and
Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg/participants">EOWG</a>) with contributions from Shadi Abou-Zahra, Steve Lee, and Shawn Lawton Henry as part
of the <a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide</a> project, co-funded by the European Commission.
</p>
</div>
</footer>