NOTE-WCAG10-CORE-TECHS-20001106
61.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Core Techniques for Web Content Accessibility Guidelines 1.0</title>
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/StyleSheets/TR/W3C-NOTE" />
<link rel="STYLESHEET" href="style/default.css" type="text/css" />
</head>
<body>
<div class="navbar"><map id="navbar-top" name="navbar-top"
title="Navigation Bar">
<p>[<a href="#toc">contents</a>] </p>
<hr class="navbar" title="Navigation area separator" />
</map></div>
<div class="head">
<p><a href="http://www.w3.org/" title="Go to W3C Home Page"><img height="48"
width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home" /></a></p>
<h1 class="notoc">Core Techniques for Web Content Accessibility Guidelines
1.0</h1>
<h2 class="notoc">W3C Note 6 November 2000</h2>
<dl>
<dt>This version:</dt>
<dd><a href="http://www.w3.org/TR/2000/NOTE-WCAG10-CORE-TECHS-20001106/">
http://www.w3.org/TR/2000/NOTE-WCAG10-CORE-TECHS-20001106/</a></dd>
<dd>(<a href="core-techniques.txt">plain text</a>, <a
href="core-techniques.ps">PostScript</a>, <a href="core-techniques.pdf">
PDF</a>, <a href="core-techniques.tgz">gzip tar file of HTML</a>, <a
href="core-techniques.zip">zip archive of HTML</a>)</dd>
<dt>Latest version:</dt>
<dd><a href="http://www.w3.org/TR/WCAG10-CORE-TECHS/">
http://www.w3.org/TR/WCAG10-CORE-TECHS/</a> <!--
<DT>Latest public version:
<DD><A HREF="http://www.w3.org/TR/WCAG10-CORE-TECHS/">http://www.w3.org/TR/WCAG10-CORE-TECHS/</A>
--></dd>
<dt>Previous version:</dt>
<dd><a href="http://www.w3.org/TR/2000/NOTE-WCAG10-CORE-TECHS-20000920/">
http://www.w3.org/TR/2000/NOTE-WCAG10-CORE-TECHS-20000920/</a></dd>
<dt>Editors:</dt>
<dd>Wendy Chisholm, <a href="http://www.w3.org/">W3C</a>;<br />
Gregg Vanderheiden, <a href="http://www.tracecenter.org/">Trace R & D
Center</a> University of Wisconsin -- Madison;<br />
Ian Jacobs, <a href="http://www.w3.org/">W3C</a></dd>
</dl>
<p class="copyright"><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
©1999 - 2000 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
href="http://www.lcs.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.inria.fr/"><abbr lang="fr"
title="Institut National de Recherche en Informatique et Automatique">
INRIA</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights
Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">
liability</a>, <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">
trademark</a>, <a
href="http://www.w3.org/Consortium/Legal/copyright-documents-19990405">document
use</a> and <a
href="http://www.w3.org/Consortium/Legal/copyright-software-19980720">software
licensing</a> rules apply.</p>
</div>
<hr />
<h2 class="nonb"><a id="Abstract" name="Abstract">Abstract</a></h2>
<p>This document describes techniques for authoring accessible content that
apply across technologies. It is intended to help authors of Web content who
wish to claim conformance to "Web Content Accessibility Guidelines 1.0"
(<cite><a href="#ref-WCAG10"
title="Link to reference WCAG10">[WCAG10]</a></cite>). While the techniques in
this document should help people author Web content that conforms to "Web
Content Accessibility Guidelines 1.0", these techniques are neither guarantees
of conformance nor the only way an author might produce conforming content.</p>
<p>This document is part of a series of documents about techniques for
authoring accessible Web content. For information about the other documents in
the series, please refer to "Techniques for Web Content Accessibility
Guidelines 1.0" <cite><a href="#ref-WCAG10-TECHS"
title="Link to reference WCAG10-TECHS">[WCAG10-TECHS]</a></cite>.</p>
<h2 class="nonb"><a id="Status" name="Status">Status of this document</a></h2>
<p>This version has been published to correct some broken links in the previous
version.</p>
<p>The 6 November 2000 version of this document is a Note in a series of Notes
produced and endorsed by the <a href="http://www.w3.org/WAI/GL/">Web Content
Accessibility Guidelines Working Group</a> (WCAG WG). This Note has not been
reviewed or endorsed by W3C Members. The series of documents supersedes the
single document <a
href="http://www.w3.org/TR/1999/WAI-WEBCONTENT-TECHS-19990505/">5 May 1999 W3C
Note Techniques for Web Content Accessibility Guidelines 1.0</a>. The topics
from the earlier document have been separated into technology-specific
documents that may evolve independently. Smaller technology-specific documents
allow authors to focus on a particular technology.</p>
<p>While the "Web Content Accessibility Guidelines 1.0" Recommendation <cite><a
href="#ref-WCAG10" title="Link to reference WCAG10">[WCAG10]</a></cite> is a
stable document, this series of companion documents is expected to evolve as
technologies change and content developers discover more effective techniques
for designing accessible Web content.</p>
<p>The <a href="http://www.w3.org/WAI/GL/wai-gl-techniques-changes.html">
history of changes to the series of documents</a> as well as the <a
href="http://www.w3.org/WAI/GL/wai-gl-tech-issues.html">list of open and closed
issues</a> are available. Readers are encouraged to comment on the document and
propose resolutions to current issues. Please send detailed comments on this
document to the Working Group at <a href="mailto:w3c-wai-gl@w3.org">
w3c-wai-gl@w3.org</a>; <a
href="http://lists.w3.org/Archives/Public/w3c-wai-gl/">public archives</a> are
available.</p>
<p>The English version of this specification is the only normative version. <a
href="http://www.w3.org/WAI/GL/WAI-WEBCONTENT-TRANSLATIONS">Translations of
this document</a> may be available.</p>
<p>The list of known errors in this document is available at <a
href="http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA">"Errata in Web Content
Accessibility Guidelines</a>." Please report errors in this document to <a
href="mailto:wai-wcag-editor@w3.org">wai-wcag-editor@w3.org</a>.</p>
<p>The <a href="http://www.w3.org/WAI/">Web Accessibility Initiative (<acronym
title="Web Accessibility Initiative">WAI</acronym>)</a> of the World Wide Web
Consortium (<acronym>W3C</acronym>) makes available a variety of resources on
Web accessibility. WAI Accessibility Guidelines are produced as part of the <a
href="http://www.w3.org/WAI/Technical/Activity">WAI Technical Activity</a>. The
goals of the Web Content Accessibility Guidelines Working Group are described
in <a href="http://www.w3.org/WAI/GL/new-charter-2000.html">the
charter</a>.</p>
<p>A list of <a href="http://www.w3.org/TR/">current W3C Recommendations and
other technical documents</a> is available.</p>
<!--NewPage--><!-- this is for html2ps -->
<div class="toc">
<h2 class="notoc"><a id="toc" name="toc">Table of Contents</a></h2>
<ul class="toc">
<li class="tocline2"><a id="toc-Abstract" href="#Abstract" name="toc-Abstract"
class="tocxref">Abstract</a></li>
<li class="tocline2"><a id="toc-Status" href="#Status" name="toc-Status"
class="tocxref">Status of this document</a></li>
<li class="tocline2"><a id="toc-structure" href="#structure"
name="toc-structure" class="tocxref">1 Structure vs. Presentation</a></li>
<li class="tocline2"><a id="toc-text-equivalent" href="#text-equivalent"
name="toc-text-equivalent" class="tocxref">2 Text equivalents</a>
<ul class="toc">
<li class="tocline3"><a id="toc-tech-overview" href="#tech-overview"
name="toc-tech-overview" class="tocxref">2.1 Overview of technologies</a></li>
<li class="tocline3"><a id="toc-backward" href="#backward" name="toc-backward"
class="tocxref">2.2 Backward Compatibility</a></li>
</ul>
</li>
<li class="tocline2"><a id="toc-alt-pages" href="#alt-pages"
name="toc-alt-pages" class="tocxref">3 Alternative pages</a>
<ul class="toc">
<li class="tocline3"><a id="toc-device-independent" href="#device-independent"
name="toc-device-independent" class="tocxref">3.1 Device-independent control
for embedded interfaces</a></li>
</ul>
</li>
<li class="tocline2"><a id="toc-navigation" href="#navigation"
name="toc-navigation" class="tocxref">4 Navigation</a></li>
<li class="tocline2"><a id="toc-comprehension" href="#comprehension"
name="toc-comprehension" class="tocxref">5 Comprehension</a>
<ul class="toc">
<li class="tocline3"><a id="toc-writing-style" href="#writing-style"
name="toc-writing-style" class="tocxref">5.1 Writing style</a></li>
<li class="tocline3"><a id="toc-multimedia-equivalents"
href="#multimedia-equivalents" name="toc-multimedia-equivalents"
class="tocxref">5.2 Multimedia equivalents</a></li>
</ul>
</li>
<li class="tocline2"><a id="toc-content-negotiation"
href="#content-negotiation" name="toc-content-negotiation" class="tocxref">6
Content negotiation</a></li>
<li class="tocline2"><a id="toc-auto-page-refresh" href="#auto-page-refresh"
name="toc-auto-page-refresh" class="tocxref">7 Automatic page refresh</a></li>
<li class="tocline2"><a id="toc-flicker" href="#flicker" name="toc-flicker"
class="tocxref">8 Screen flicker</a></li>
<li class="tocline2"><a id="toc-bundled-documents" href="#bundled-documents"
name="toc-bundled-documents" class="tocxref">9 Bundled documents</a></li>
<li class="tocline2"><a id="toc-validation" href="#validation"
name="toc-validation" class="tocxref">10 Validation</a>
<ul class="toc">
<li class="tocline3"><a id="toc-auto-validators" href="#auto-validators"
name="toc-auto-validators" class="tocxref">10.1 Automatic validators</a></li>
<li class="tocline3"><a id="toc-repair-tools" href="#repair-tools"
name="toc-repair-tools" class="tocxref">10.2 Repair tools</a></li>
<li class="tocline3"><a id="toc-user-scenarios" href="#user-scenarios"
name="toc-user-scenarios" class="tocxref">10.3 User scenarios</a></li>
<li class="tocline3"><a id="toc-spell-check" href="#spell-check"
name="toc-spell-check" class="tocxref">10.4 Spell and grammar checks</a></li>
</ul>
</li>
<li class="tocline2"><a id="toc-browser-support" href="#browser-support"
name="toc-browser-support" class="tocxref">11 Browser Support</a></li>
<li class="tocline2"><a id="toc-access-reviewed" href="#access-reviewed"
name="toc-access-reviewed" class="tocxref">12 Technologies Reviewed for
Accessibility</a></li>
<li class="tocline2"><a id="toc-audio-video" href="#audio-video"
name="toc-audio-video" class="tocxref">13 Audio and Video</a></li>
<li class="tocline2"><a id="toc-audio-information" href="#audio-information"
name="toc-audio-information" class="tocxref">14 Audio information</a></li>
<li class="tocline2"><a id="toc-video-information" href="#video-information"
name="toc-video-information" class="tocxref">15 Visual information and
motion</a></li>
<li class="tocline2"><a id="toc-collated-transcripts"
href="#collated-transcripts" name="toc-collated-transcripts" class="tocxref">16
Collated text transcripts</a></li>
<li class="tocline2"><a id="toc-References" href="#References"
name="toc-References" class="tocxref">17 References</a></li>
<li class="tocline2"><a id="toc-Resources" href="#Resources"
name="toc-Resources" class="tocxref">18 Resources</a>
<ul class="toc">
<li class="tocline3"><a id="toc-OtherGuidelines" href="#OtherGuidelines"
name="toc-OtherGuidelines" class="tocxref">18.1 Other guidelines</a></li>
<li class="tocline3"><a id="toc-ToolResources" href="#ToolResources"
name="toc-ToolResources" class="tocxref">18.2 User agents and other
tools</a></li>
<li class="tocline3"><a id="toc-AccessResources" href="#AccessResources"
name="toc-AccessResources" class="tocxref">18.3 Accessibility
resources</a></li>
</ul>
</li>
<li class="tocline2"><a id="toc-Acknowledgments" href="#Acknowledgments"
name="toc-Acknowledgments" class="tocxref">19 Acknowledgments</a></li>
</ul>
</div>
<div class="noprint">
<hr title="Separator from Introduction" />
</div>
<!--NewPage--><!-- this is for html2ps -->
<h2>1 <a id="structure" name="structure">Structure vs. Presentation</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-color-convey"
class="noxref">2.1</a> Ensure that all information conveyed with color is also
available without color, for example from context or markup.
[Priority 1]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-use-markup"
class="noxref">3.1</a> When an appropriate markup language exists, use markup
rather than images to convey information. [Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-style-sheets"
class="noxref">3.3</a> Use style sheets to control layout and presentation.
[Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-logical-headings"
class="noxref">3.5</a> Use header elements to convey document structure and use
them according to specification. [Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-list-structure"
class="noxref">3.6</a> Mark up lists and list items properly.
[Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-table-for-layout"
class="noxref">5.3</a> Do not use tables for layout unless the table makes
sense when linearized. Otherwise, if the table does not make sense, provide an
alternative equivalent (which may be a linearized version).
[Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-table-layout"
class="noxref">5.4</a> If a table is used for layout, do not use any structural
markup for the purpose of visual formatting. [Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-operable-scripts"
class="noxref">6.4</a> For scripts and applets, ensure that event handlers are
input device-independent. [Priority 2]</li>
</ul>
<p>When designing a document or series of documents, content developers should
strive first to identify the desired structure for their documents before
thinking about how the documents will be presented to the user. Distinguishing
the structure of a document from how the content is presented offers a number
of advantages, including improved accessibility, manageability, and
portability.</p>
<p>Identifying what is structure and what is presentation may be challenging at
times. For instance, many content developers consider that a horizontal line
communicates a structural division. This may be true for sighted users, but to
unsighted users or users without graphical browsers, a horizontal line may have
next to no meaning. For example, in HTML content developers should use the HTML
4.01 <cite><a href="#ref-HTML4" title="Link to reference HTML4">
[HTML4]</a></cite> heading elements (H1-H6) to identify new sections. These may
be <em>complemented</em> by visual or other cues such as horizontal rules, but
should not be replaced by them.</p>
<p>The inverse <!-- @@ EH doesn't think inverse is the right word--> holds as
well: content developers should not use structural elements to achieve
presentation effects. For instance in HTML, even though the BLOCKQUOTE element
may cause indented text in some browsers, it is designed to identify a
quotation, not create a presentation side-effect. BLOCKQUOTE elements used for
indentation confuse users and search robots alike, who expect the element to be
used to mark up block quotations.</p>
<p>The separation of presentation from structure in <abbr
title="Extensible Markup Language">XML</abbr> documents is inherent. As Norman
Walsh states in "A Guide to XML" <cite><a href="#ref-WALSH"
title="Link to reference WALSH">[WALSH]</a></cite>,</p>
<blockquote>
<p>HTML browsers are largely hardcoded. A first level heading appears the way
it does because the browser recognizes the H1 tag. Again, since XML documents
have no fixed tag set, this approach will not work. The presentation of an XML
document is dependent on a stylesheet.</p>
</blockquote>
<p><span class="quicktest">Quicktest!</span> To determine if content is
structural or presentational, create an outline of your document. Each point in
the hierarchy denotes a structural change. Use structural markup to mark these
changes and presentational markup to make them more apparent visually and
aurally. Notice that horizontal rules will not appear in this outline and
therefore are not structural, but presentational. <strong>Note.</strong> This
quicktest addresses chapter, section, and paragraph structure. To determine
structure within phrases, look for abbreviations, changes in natural language,
definitions, and list items.</p>
<h2>2 <a id="text-equivalent" name="text-equivalent">Text equivalents</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority 1]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-redundant-server-links"
class="noxref">1.2</a> Provide redundant text links for each active region of a
server-side image map. [Priority 1]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-redundant-client-links"
class="noxref">1.5</a> Until user agents render text equivalents for
client-side image map links, provide redundant text links for each active
region of a client-side image map. [Priority 3]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-frame-longdesc"
class="noxref">12.2</a> Describe the purpose of frames and how frames relate to
each other if it is not obvious by frame titles alone. [Priority 2]</li>
</ul>
<p>Text is considered accessible to almost all users since it may be handled by
screen readers, non-visual browsers, and braille readers. It may be displayed
visually, magnified, synchronized with a video to create a caption, etc. As you
design a document containing non-textual information (images, applets, sounds,
multimedia presentations, etc.), supplement that information with textual
equivalents wherever possible.</p>
<p>When a text equivalent is presented to the user, it fulfills essentially the
same function (to the extent possible) as the original content. For simple
content, a text equivalent may need only describe the function or purpose of
content. For complex content (charts, graphs, etc.), the text equivalent may be
longer and include descriptive information.</p>
<p>Text equivalents must be provided for logos, photos, submit buttons,
applets, bullets in lists, <acronym
title="American Standard Code for Information Interchange">ASCII</acronym> art,
and all of the links within an image map as well as invisible images used to
lay out a page.</p>
<p><span class="quicktest">Quicktest!</span> A good test to determine if a text
equivalent is useful is to imagine reading the document aloud over the
telephone. What would you say upon encountering this image to make the page
comprehensible to the listener?</p>
<h3>2.1 <a id="tech-overview" name="tech-overview">Overview of
technologies</a></h3>
<p>How one specifies a text equivalent depends on the document language.</p>
<p>For example, depending on the element, HTML allows content developers to
specify text equivalents through attributes (" alt" or "longdesc" ) or in
element content (the OBJECT element).</p>
<p>Video formats, such as QuickTime, will allow developers to include a variety
of alternative audio and video tracks. SMIL (<cite><a href="#ref-SMIL"
title="Link to reference SMIL">[SMIL]</a></cite>) allows developers to
synchronize alternative audio and video clips, and text files with each
other.</p>
<p>In creating XML <abbr title="Document Type Definition">DTDs</abbr>, ensure
that elements that might need a description have some way of associating
themselves with the description.</p>
<p>Some image formats allow internal text in the data file along with the image
information. If an image format supports such text (e.g., Portable Network
Graphics, see <cite><a href="#ref-PNG" title="Link to reference PNG">
[PNG]</a></cite>) content developers may also supply information there as
well.</p>
<h3>2.2 <a id="backward" name="backward">Backward Compatibility</a></h3>
<p>Content developers must consider backward compatibility when designing Web
pages or sites since:</p>
<ul>
<li>Some user agents do not support some HTML features,</li>
<li>People may use older browsers or video players,</li>
<li>Compatibility problems may arise between software</li>
</ul>
<p>Therefore, when designing for older technologies, consider these
techniques:</p>
<ul>
<li>Provide inline text equivalents. For example, include a description of the
image immediately after the image.</li>
<li>Provide links to long text equivalents either in a different file or on the
same page. These are called <a id="d-link" name="d-link">description links</a>
or "d-links". The link text should explain that the link designates a
description. Where possible, it should also explain the nature of the
description. However, content developers concerned about how the description
link will affect the visual appearance of the page may use more discrete link
text such as "[D]", which is recommended by NCAM (refer to <cite><a
href="#ref-NCAM" title="Link to reference NCAM">[NCAM]</a></cite>). In this
case, they should also provide more information about the link target so that
users can distinguish links that share "[D]" as content (e.g., with the "title"
attribute in HTML).</li>
</ul>
<h2>3 <a id="alt-pages" name="alt-pages">Alternative pages</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-alt-pages" class="noxref">
11.4</a> If, after best efforts, you cannot create an accessible page, provide
a link to an alternative page that uses W3C technologies, is accessible, has
equivalent information (or functionality), and is updated as often as the
inaccessible (original) page. [Priority 1]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-fallback-page"
class="noxref">6.5</a> Ensure that dynamic content is accessible or provide an
alternative presentation or page. [Priority 2]</li>
</ul>
<p>Although it is possible to make most content accessible, it may happen that
all or part of a page remains inaccessible. Additional techniques for creating
accessible alternatives include:</p>
<ol>
<li><a id="manual-alt-page" name="manual-alt-page">Allow users to navigate to a
separate page that is accessible, contains the same information as the
inaccessible page, and is maintained with the same frequency as the
inaccessible page.</a></li>
<li>Instead of static alternative pages, set up server-side scripts that
generate accessible versions of a page on demand.</li>
<li>Refer to the examples for <a
href="http://www.w3.org/TR/WCAG10-HTML-TECHS/#noframes">Frames</a> and <a
href="http://www.w3.org/TR/WCAG10-HTML-TECHS/#scripts-alt">Scripts</a>.</li>
<li>Provide a phone number, fax number, e-mail, or postal address where
information is available and accessible, preferably 24 hours a day</li>
</ol>
<p>Here are two techniques for linking to an accessible alternative page:</p>
<ol>
<li>Provide links at the top of both the main and alternative pages to allow a
user to move back and forth between them. For example, at the top of a
graphical page include a link to the text-only page, and at the top of a
text-only page include a link to the associated graphical page. Ensure that
these links are one of the first that users will tab to by placing them at the
top of the page, before other links.</li>
<li>Use meta information to designate alternative documents. Browsers should
load the alternative page automatically based on the user's browser type and
preferences.</li>
</ol>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-operable"
class="noxref">9.2</a> Ensure that any element that has its own interface can
be operated in a device-independent manner. [Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-device-independent-events"
class="noxref">9.3</a> For scripts, specify logical event handlers rather than
device-dependent event handlers. [Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-tab-order" class="noxref">
9.4</a> Create a logical tab order through links, form controls, and objects.
[Priority 3]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-shortcuts"
class="noxref">9.5</a> Provide keyboard shortcuts to important links (including
those in client-side image maps), form controls, and groups of form controls.
[Priority 3]</li>
</ul>
<p>Not every user has a graphic environment with a mouse or other pointing
device. Some users rely on keyboard, alternative keyboard or voice input to
navigate links, activate form controls, etc. Content developers must ensure
that users may interact with a page with devices other than a pointing device.
A page designed for keyboard access (in addition to mouse access) will
generally be accessible to users with other input devices. What's more,
designing a page for keyboard access will usually improve its overall design as
well.</p>
<p>Keyboard access to links and form controls may be specified in a few
ways:</p>
<dl>
<dt><strong>Image map links</strong></dt>
<dd>Provide text equivalents for client-side image map areas, or provide
redundant text links for server-side image maps. <a
href="http://www.w3.org/TR/WCAG10-HTML-TECHS/#image-maps">Refer to the image
map section for examples.</a></dd>
<dt><strong>Keyboard shortcuts</strong></dt>
<dd>Provide keyboard shortcuts so that users may combine keystrokes to navigate
links or form controls on a page. <strong>Note.</strong> Keyboard shortcuts --
notably the key used to activate the shortcut -- may be handled differently by
different operating systems. On Windows machines, the "alt" and "ctrl" key are
most commonly used while on a Macintosh, it is the apple or "clover leaf" key.
Refer to the <a href="http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-accesskey">
Keyboard access for links</a> and <a
href="http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-keyboard-access">Keyboard
Access to Forms</a> sections for examples.</dd>
<dt><strong>Tabbing order</strong></dt>
<dd>Tabbing order describes a (logical) order for navigating from link to link
or form control to form control (usually by pressing the "tab" key, hence the
name). Refer to the <a
href="http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-keyboard-access">Keyboard
Access to Forms</a> section for examples.</dd>
</dl>
<h3>3.1 <a id="device-independent" name="device-independent">Device-independent
control for embedded interfaces</a></h3>
<p>Some elements import objects (e.g., applets or multimedia players) whose
interfaces cannot be controlled through the markup language. In such cases,
content developers should provide alternative equivalents with accessible
interfaces if the imported objects themselves do not provide accessible
interfaces. <!--How do authors do these things before HTML 4.0? -IJ --></p>
<h2>4 <a id="navigation" name="navigation">Navigation</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-consistent-style"
class="noxref">14.3</a> Create a style of presentation that is consistent
across pages. [Priority 3]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-clear-nav-mechanism"
class="noxref">13.4</a> Use navigation mechanisms in a consistent manner.
[Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-nav-bar" class="noxref">
13.5</a> Provide navigation bars to highlight and give access to the navigation
mechanism. [Priority 3]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-site-description"
class="noxref">13.3</a> Provide information about the general layout of a site
(e.g., a site map or table of contents). [Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-searches" class="noxref">
13.7</a> If search functions are provided, enable different types of searches
for different skill levels and preferences. [Priority 3]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-use-metadata"
class="noxref">13.2</a> Provide metadata to add semantic information to pages
and sites. [Priority 2]</li>
</ul>
<p>A consistent style of presentation on each page allows users to locate
navigation mechanisms more easily but also to skip navigation mechanisms more
easily to find important content. This helps people with learning and reading
disabilities but also makes navigation easier for all users. Predictability
will increase the likelihood that people will find information at your site, or
avoid it when they so desire.</p>
<p>Examples of structures that may appear at the same place between pages:</p>
<ol>
<li>navigation bars</li>
<li>the primary content of a page</li>
<li>advertising</li>
</ol>
<p>A navigation mechanism creates a set of paths a user may take through your
site. Providing navigation bars, site maps, and search features all increase
the likelihood that a user will reach the information they seek at your site.
If your site is highly visual in nature, the structure might be harder to
navigate if the user can't form a mental map of where they are going or where
they have been. To help them, content developers should describe any navigation
mechanisms. It is crucial that the descriptions and site guides be accessible
since people who are lost at your site will rely heavily on them.</p>
<p>When providing search functionality, content developers should offer search
mechanisms that satisfy varying skill levels and preferences. Most search
facilities require the user to enter keywords for search terms. Users with
spelling disabilities and users unfamiliar with the language of your site will
have a difficult time finding what they need if the search requires perfect
spelling. Search engines might include a spell checker, offer "best guess"
alternatives, query-by-example searches, similarity searches, etc.</p>
<h2>5 <a id="comprehension" name="comprehension">Comprehension</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-simple-and-straightforward"
class="noxref">14.1</a> Use the clearest and simplest language appropriate for
a site's content. [Priority 1]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-front-loading"
class="noxref">13.8</a> Place distinguishing information at the beginning of
headings, paragraphs, lists, etc. [Priority 3]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-icons" class="noxref">
14.2</a> Supplement text with graphic or auditory presentations where they will
facilitate comprehension of the page. [Priority 3]</li>
</ul>
<p>The following sections discuss techniques for helping comprehension of a
page or site.</p>
<h3>5.1 <a id="writing-style" name="writing-style">Writing style</a></h3>
<p>The following writing style suggestions should help make the content of your
site easier to read for everyone, especially people with reading and/or
cognitive disabilities. Several guides (including <cite><a href="#ref-HACKER"
title="Link to reference HACKER">[HACKER]</a></cite>) discuss these and other
writing style issues in more detail.</p>
<ol>
<li>Strive for clear and accurate headings and link descriptions. This includes
using link phrases that are terse and that make sense when read out of context
or as part of a series of links (Some users browse by jumping from link to link
and listening only to link text.) Use informative headings so that users can
scan a page quickly for information rather than reading it in detail.</li>
<li>State the topic of the sentence or paragraph at the beginning of the
sentence or paragraph (this is called "front-loading"). This will help both
people who are skimming visually, but also people who use speech synthesizers.
"Skimming" with speech currently means that the user jumps from heading to
heading, or paragraph to paragraph and listens to just enough words to
determine whether the current chunk of information (heading, paragraph, link,
etc.) interests them. If the main idea of the paragraph is in the middle or at
the end, speech users may have to listen to most of the document before finding
what they want. Depending on what the user is looking for and how much they
know about the topic, search features may also help users locate content more
quickly.</li>
<li>Limit each paragraph to one main idea.</li>
<li>Avoid slang, jargon, and specialized meanings of familiar words, unless
defined within your document.</li>
<li>Favor words that are commonly used. For example, use "begin" rather than
"commence" or use "try" rather than "endeavor."</li>
<li>Use active rather than passive verbs.</li>
<li>Avoid complex sentence structures.</li>
</ol>
<p>To help determine whether your document is easy to read, consider using the
Gunning-Fog reading measure (described in <cite><a href="#ref-SPOOL"
title="Link to reference SPOOL">[SPOOL]</a></cite> with examples and the
algorithm online at <cite><a href="#ref-TECHHEAD"
title="Link to reference TECHHEAD">[TECHHEAD]</a></cite>). This algorithm
generally produces a lower score when content is easier to read. As example
results, the Bible, Shakespeare, Mark Twain, and TV Guide all have Fog indexes
of about 6. Time, Newsweek, and the Wall St. Journal an average Fog index of
about 11.</p>
<h3>5.2 <a id="multimedia-equivalents" name="multimedia-equivalents">Multimedia
equivalents</a></h3>
<p>For people who do not read well or not at all, multimedia (non-text)
equivalents may help facilitate comprehension. Beware that multimedia
presentations do not <strong>always</strong> make text easier to understand.
Sometimes, multimedia presentations may make it more confusing.</p>
<p>Examples of multimedia that supplement text:</p>
<ol>
<li>A chart of complex data, such as sales figures of a business for the past
fiscal year.</li>
<li>A translation of the text into a Sign Language movie clip. Sign Language is
a very different language than spoken languages. For example, some people who
may communicate via American Sign Language may not be able to read American
English.</li>
<li>Pre-recorded audio of music, spoken language, or sound effects may also
help non-readers who can perceive audio presentations. Although text may be
generated as speech through speech synthesis, changes in a recorded speaker's
voice can convey information that is lost through synthesis.</li>
</ol>
<h2>6 <a id="content-negotiation" name="content-negotiation">Content
negotiation</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-content-preferences"
class="noxref">11.3</a> Provide information so that users may receive documents
according to their preferences (e.g., language, content type, etc.)
[Priority 3]</li>
</ul>
<p>There are a variety of strategies to allow users to select the appropriate
content:</p>
<ol>
<li>Include links to other versions of content, such as translations. For
example, the link "Refer to the French version of this document" links to the
French version.</li>
<li>Indicate content type or language through markup (e.g., in HTML use "type"
and "hreflang").</li>
<li>Use content negotiation to serve content per the client request. For
example, serve the French version of a document to clients requesting
French.</li>
</ol>
<h2>7 <a id="auto-page-refresh" name="auto-page-refresh">Automatic page
refresh</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-periodic-refresh"
class="noxref">7.4</a> Until user agents provide the ability to stop the
refresh, do not create periodically auto-refreshing pages.
[Priority 2]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-auto-forward"
class="noxref">7.5</a> Until user agents provide the ability to stop
auto-redirect, do not use markup to redirect pages automatically. Instead,
configure the server to perform redirects. [Priority 2]</li>
</ul>
<p>Content developers sometimes create pages that refresh or change without the
user requesting the refresh. This automatic refresh can be very disorienting to
some users. Instead, in order of preference, authors should:</p>
<ol>
<li>Configure the server to use the appropriate HTTP status code (301). Using
HTTP headers is preferable because it reduces Internet traffic and download
times, it may be applied to non-HTML documents, and it may be used by agents
who requested only a HEAD request (e.g., link checkers). Also, status codes of
the 30x type provide information such as "moved permanently" or "moved
temporarily" that cannot be given with META refresh.</li>
<li>Replace the page that would be redirected with a static page containing a
normal link to the new page.</li>
</ol>
<p><strong>Note.</strong> Both <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-periodic-refresh"
class="noxref">checkpoint 7.4</a> and <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-auto-forward" class="noxref">
checkpoint 7.5</a> address problems posed by legacy user agents. Newer user
agents should disable refresh and substitute a link to new information at the
top of the page.</p>
<p>Deprecated examples are provided in "Techniques for Web Content
Accessibility Guidelines 1.0" <cite><a href="#ref-WCAG10-TECHS"
title="Link to reference WCAG10-TECHS">[WCAG10-TECHS]</a></cite>.</p>
<h2>8 <a id="flicker" name="flicker">Screen flicker</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-flicker"
class="noxref">7.1</a> Until user agents allow users to control flickering,
avoid causing the screen to flicker. [Priority 1]</li>
</ul>
<p>A flickering or flashing screen may cause seizures in users with
photosensitive epilepsy and content developers should thus avoid causing the
screen to flicker. Seizures can be triggered by flickering or flashing in the 4
to 59 flashes per second (Hertz) range with a peak sensitivity at 20 flashes
per second as well as quick changes from dark to light (like strobe
lights).</p>
<h2>9 <a id="bundled-documents" name="bundled-documents">Bundled
documents</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-bundled-version"
class="noxref">13.9</a> Provide information about document collections (i.e.,
documents comprising multiple pages.). [Priority 3]</li>
</ul>
<p>Bundled documents can facilitate reading offline. To create a coherent
package:</p>
<ul>
<li>Use metadata to describe the relationships between components of the
package (refer to <a
href="http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-metadata">link metadata</a>
for HTML).</li>
<li>Use archiving tools such as zip, tar and gzip, and StuffIt to create the
package.</li>
</ul>
<h2>10 <a id="validation" name="validation">Validation</a></h2>
<!-- See
http://microsoft.com/enable/dev/web_guidelines.htm
for examples -IJ -->
<p>This section discusses strategies and techniques for testing Web documents
to determine accessibility issues that have been resolved and those that
haven't. These tests should highlight major access issues, and are valuable in
reducing a number of accessibility barriers. However, some of these testing
scenarios only replicate conditions caused by a disability; they do not
simulate the full experience a user with a disability might have. In real-life
settings, your pages may be less usable than you expected. Thus, one of the
strategies recommends that content developers observe people with different
disabilities as they attempt to use a page or site.</p>
<p>If, after completing the following tests and adjusting your design
accordingly, you find that a page is still not accessible, it is likely that
you should create an <a href="#alt-pages">alternative page</a> that is
accessible.</p>
<p><strong>Note.</strong> Passing these tests does not guarantee <a
href="http://www.w3.org/TR/WCAG10/#Conformance">conformance</a> to the "Web
Content Accessibility Guidelines 1.0".</p>
<h3>10.1 <a id="auto-validators" name="auto-validators">Automatic
validators</a></h3>
<p>A validator can verify the syntax of your pages (e.g., HTML, CSS, XML).
Correct syntax will help eliminate a number of accessibility problems since
software can process well-formed documents more easily. Also, some validators
can warn you of some accessibility problems based on syntax alone (e.g., a
document is missing an attribute or property that is important to
accessibility). Note, however, that correct syntax does not guarantee that a
document will be accessible. For instance, you may provide a text equivalent
for an image according to the language's specification, but the text may be
inaccurate or insufficient. Some validators will therefore ask you questions
and step you through more subjective parts of the analysis. Some examples of
automatic validators include:</p>
<ol>
<li><a id="auto-check" name="auto-check">An automated accessibility validation
tool</a> such as Bobby (refer to <cite><a href="#ref-BOBBY"
title="Link to reference BOBBY">[BOBBY]</a></cite>).</li>
<li><a id="html-validation" name="html-validation">An HTML validation
service</a> such as the W3C HTML Validation Service (refer to <cite><a
href="#ref-HTMLVAL" title="Link to reference HTMLVAL">
[HTMLVAL]</a></cite>).</li>
<li><a id="css-validation" name="css-validation">A style sheets validation
service</a> such as the W3C CSS Validation Service (refer to <cite><a
href="#ref-CSSVAL" title="Link to reference CSSVAL">[CSSVAL]</a></cite>).</li>
</ol>
<h3>10.2 <a id="repair-tools" name="repair-tools">Repair tools</a></h3>
<p>Validators usually report what issues to solve and often give examples of
how to solve them. They do not usually help an author walk through each problem
and help the author modify the document interactively. The WAI Evaluation and
Repair Working Group (<cite><a href="#ref-WAI-ER"
title="Link to reference WAI-ER">[WAI-ER]</a></cite>) is working to develop a
suite of tools that will help authors not only identify issues but solve them
interactively.</p>
<h3>10.3 <a id="user-scenarios" name="user-scenarios">User scenarios</a></h3>
<p>Keep in mind that most user agents (browsers) and operating systems allow
users to configure settings that change the way software looks, sounds, and
behaves. With the variety of user agents, different users will have very
different experiences with the Web. Therefore:</p>
<ol>
<li><a id="test-text-only" name="test-text-only">Test your pages</a> with a
text-only browser such as Lynx (<cite><a href="#ref-LYNX"
title="Link to reference LYNX">[LYNX]</a></cite>) or a Lynx emulator such as
Lynx Viewer (<cite><a href="#ref-LYNXVIEW"
title="Link to reference LYNXVIEW">[LYNXVIEW]</a></cite>) or Lynx-me (<cite><a
href="#ref-LYNXME" title="Link to reference LYNXME">[LYNXME]</a></cite>).</li>
<li><a id="test-multiple-browsers" name="test-multiple-browsers">Use multiple
graphic browsers</a>, with:
<ul>
<li>sounds and images loaded,</li>
<li>images not loaded,</li>
<li>sounds not loaded,</li>
<li>no mouse,</li>
<li>frames, scripts, style sheets, and applets not loaded.</li>
</ul>
</li>
<li><a id="test-older" name="test-older">Use several browsers, old and new.</a>
<strong>Note.</strong> Some operating systems or browsers do not allow multiple
installations of the browser on the same machine. It may also be difficult to
locate older browser software.</li>
<li>Use <a id="other-tests" name="other-tests">other tools</a> such as a
self-voicing browser (e.g., <cite><a href="#ref-PWWEBSPEAK"
title="Link to reference PWWEBSPEAK">[PWWEBSPEAK]</a></cite> and <cite><a
href="#ref-HOMEPAGEREADER" title="Link to reference HOMEPAGEREADER">
[HOMEPAGEREADER]</a></cite>), a screen reader (e.g., <cite><a href="#ref-JAWS"
title="Link to reference JAWS">[JAWS]</a></cite> and <cite><a
href="#ref-WINVISION" title="Link to reference WINVISION">
[WINVISION]</a></cite>), magnification software, a small display, an onscreen
keyboard, an alternative keyboard, etc. <strong>Note.</strong> If a Web site is
usable with one of these products it does not ensure that the site will be
usable by other products. For a more detailed list of assistive technologies
used to access the Web refer to (<cite><a href="#ref-ALTBROWSERS"
title="Link to reference ALTBROWSERS">[ALTBROWSERS]</a></cite>).</li>
</ol>
<h3>10.4 <a id="spell-check" name="spell-check">Spell and grammar
checks</a></h3>
<p>A person reading a page with a speech synthesizer may not be able to
decipher the synthesizer's best guess for a word with a spelling error. Grammar
checkers will help to ensure that the textual content of your page is correct.
This will help readers for whom your document is not written in their native
tongue, or people who are just learning the language of the document. Thus, you
will help increase the comprehension of your page.</p>
<h2>11 <a id="browser-support" name="browser-support">Browser Support</a></h2>
<p><strong>Note.</strong> <em>At the time of this writing, not all user agents
support some of the HTML 4.01 <cite><a href="#ref-HTML4"
title="Link to reference HTML4">[HTML4]</a></cite> attributes and elements that
may significantly increase accessibility of Web pages.</em></p>
<p>Please refer to the W3C Web site (<cite><a href="#ref-WAI-UA-SUPPORT"
title="Link to reference WAI-UA-SUPPORT">[WAI-UA-SUPPORT]</a></cite>) for
information about browser and other user agent support of accessibility
features.</p>
<p>In general, please note that HTML user agents ignore attributes they don't
support and they render the content of unsupported elements.</p>
<h2>12 <a id="access-reviewed" name="access-reviewed">Technologies Reviewed for
Accessibility</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-latest-w3c-specs"
class="noxref">11.1</a> Use W3C technologies when they are available and
appropriate for a task and use the latest versions when supported.
[Priority 2]</li>
</ul>
<p>"Web Content Accessibility Guidelines 1.0" suggests using W3C technologies
since they have been reviewed for accessibility issues and therefore have
accessibility features built in. The latest W3C technologies are available from
the <a href="http://www.w3.org/TR/">W3C Technical Reports and Publications</a>
page.</p>
<p>Brief overview of current W3C technologies:</p>
<ul>
<li>MathML for mathematical equations</li>
<li>HTML, XHTML, XML for structured documents</li>
<li>RDF for meta data</li>
<li>SMIL to create multimedia presentations</li>
<li>CSS and XSL to define style sheets</li>
<li>XSLT to create style transformations</li>
<li>PNG for graphics (although some are best expressed in JPG, a non-w3c spec)
<!-- <li>Are there others that we need to discuss? WebCGM? --></li>
</ul>
<!-- P>@@ Do we want to recommend HTML over XHTML? what about CSS1 and CSS2? What about non-W3C
specifications like PDF, Flash, etc.</P -->
<h2>13 <a id="audio-video" name="audio-video">Audio and Video</a></h2>
<h2>14 <a id="audio-information" name="audio-information">Audio
information</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-synchronize-equivalents"
class="noxref">1.4</a> For any time-based multimedia presentation (e.g., a
movie or animation), synchronize equivalent alternatives (e.g., captions or
auditory descriptions of the visual track) with the presentation.
[Priority 1]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-fallback-page"
class="noxref">6.5</a> Ensure that dynamic content is accessible or provide an
alternative presentation or page. [Priority 2]</li>
</ul>
<p>Auditory presentations must be accompanied by <em>text transcripts</em>,
textual equivalents of auditory events. When these transcripts are presented
synchronously with a video presentation they are called <em>captions</em> and
are used by people who cannot hear the audio track of the video material.</p>
<p>Some media formats (e.g., QuickTime 3.0 and SMIL) allow captions and video
descriptions to be added to the multimedia clip. SAMI allows captions to be
added. The following example demonstrates that captions should include speech
as well as other sounds in the environment that help viewers understand what is
going on.</p>
<div class="example">
<p><strong>Example.</strong></p>
<p>Captions for a scene from "E.T." The phone rings three times, then is
answered.</p>
<blockquote>
<p>[phone rings]</p>
<p>[ring]</p>
<p>[ring]</p>
<p>Hello?"</p>
</blockquote>
<p class="off">End example.</p>
</div>
<p>Until the format you are using supports alternative tracks, two versions of
the movie could be made available, one with captions and descriptive video, and
one without. Some technologies, such as SMIL and SAMI, allow separate
audio/visual files to be combined with text files via a synchronization file to
create captioned audio and movies.</p>
<p>Some technologies also allow the user to choose from multiple sets of
captions to match their reading skills. For more information see the SMIL 1.0
(<cite><a href="#ref-SMIL" title="Link to reference SMIL">[SMIL]</a></cite>)
specification.</p>
<p>Equivalents for sounds can be provided in the form of a text phrase on the
page that links to a text transcript or description of the sound file. The link
to the transcript should appear in a highly visible location such as at the top
of the page. However, if a script is automatically loading a sound, it should
also be able to automatically load a visual indication that the sound is
currently being played and provide a description or transcript of the
sound.</p>
<p><strong>Note.</strong> Some controversy surrounds this technique because the
browser should load the visual form of the information instead of the auditory
form if the user preferences are set to do so. However, strategies must also
work with today's browsers.</p>
<p>For more information, please refer to <cite><a href="#ref-NCAM"
title="Link to reference NCAM">[NCAM]</a></cite>.</p>
<h2>15 <a id="video-information" name="video-information">Visual information
and motion</a></h2>
<p>Checkpoints in this section:</p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-auditory-descriptions"
class="noxref">1.3</a> Until user agents can automatically read aloud the text
equivalent of a visual track, provide an auditory description of the important
information of the visual track of a multimedia presentation.
[Priority 1]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-flicker"
class="noxref">7.1</a> Until user agents allow users to control flickering,
avoid causing the screen to flicker. [Priority 1]</li>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-movement"
class="noxref">7.3</a> Until user agents allow users to freeze moving content,
avoid movement in pages. [Priority 2]</li>
</ul>
<p>Auditory descriptions of the visual track provide narration of the key
visual elements without interfering with the audio or dialogue of a movie. Key
visual elements include actions, settings, body language, graphics, and
displayed text. Auditory descriptions are used primarily by people who are
blind to follow the action and other non-auditory information in video
material.</p>
<div class="example">
<p><strong>Example.</strong>
<!--Problem of instability of all links like this one --></p>
<p>Here's an example of a <a href="#collated-transcripts">collated text
transcript</a> of a clip from "The Lion King" (available at <cite><a
href="#ref-DVS" title="Link to reference DVS">[DVS]</a></cite>). Note that the
Describer is providing the auditory description of the video track and that the
description has been integrated into the transcript.</p>
<blockquote>
<p>Simba: Yeah!</p>
<p>Describer: Simba races outside, followed by his parents. Sarabi smiles and
nudges Simba gently toward his father. The two sit side-by-side, watching the
golden sunrise.</p>
<p>Mufasa: Look Simba, everything the light touches is our kingdom.</p>
<p>Simba: Wow.</p>
</blockquote>
<p class="off">End example.</p>
</div>
<p><b>Note</b>. If there is no important visual information, for example, an
animated talking head that describes (through prerecorded speech) how to use
the site, then an auditory description is not necessary.</p>
<p>For movies, provide auditory descriptions that are synchronized with the
original audio. Refer to the section on <a href="#audio-information">audio
information</a> for more information about multimedia formats.</p>
<h2>16 <a id="collated-transcripts" name="collated-transcripts">Collated text
transcripts</a></h2>
<p>Collated text transcripts allow access by people with both visual and
hearing disabilities. They also provide everyone with the ability to index and
search for information contained in audio/visual materials.</p>
<p>Collated text transcripts include spoken dialogue as well as any other
significant sounds including on-screen and off-screen sounds, music, laughter,
applause, etc. In other words, all of the text that appears in captions as well
as all of the descriptions provided in the auditory description.</p>
<hr />
<!--NewPage--><!-- this is for html2ps -->
<h2>17 <a id="References" name="References">References</a></h2>
<p>For the latest version of any <abbr title="the World Wide Web Consortium">
W3C</abbr> specification please consult the list of <a
href="http://www.w3.org/TR/"><abbr title="the World Wide Web Consortium">
W3C</abbr> Technical Reports</a> at http://www.w3.org/TR.</p>
<dl>
<dt><a id="ref-HTML4" name="ref-HTML4"><b>[HTML4]</b></a></dt>
<dd><a href="http://www.w3.org/TR/1999/REC-html401-19991224/">"HTML 4.01
Recommendation"</a>, D. Raggett, A. Le Hors, and I. Jacobs, eds., 24 December
1999. This <acronym>HTML</acronym> 4.01 Recommendation is
http://www.w3.org/TR/1999/REC-html401-19991224/.</dd>
<dt><a id="ref-PNG" name="ref-PNG"><b>[PNG]</b></a></dt>
<dd><a href="http://www.w3.org/TR/REC-png">"PNG (Portable Network Graphics)
Specification"</a>, T. Boutell, ed., T. Lane, contributing ed., 1 October 1996.
The <a href="http://www.w3.org/TR/REC-png">latest version of PNG 1.0</a> is
available at http://www.w3.org/TR/REC-png.</dd>
<dt><a id="ref-SMIL" name="ref-SMIL"><b>[SMIL]</b></a></dt>
<dd><a href="http://www.w3.org/TR/1998/REC-smil-19980615/">"Synchronized
Multimedia Integration Language (SMIL) 1.0 Specification"</a>, P. Hoschka, ed.,
15 June 1998. This SMIL 1.0 Recommendation is
http://www.w3.org/TR/1998/REC-smil-19980615/. The <a
href="http://www.w3.org/TR/REC-smil/">latest version of SMIL 1.0</a> is
available at http://www.w3.org/TR/REC-smil.</dd>
<dt><a id="ref-WCAG10" name="ref-WCAG10"><b>[WCAG10]</b></a></dt>
<dd><a href="http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/">"Web Content
Accessibility Guidelines 1.0"</a>, W. Chisholm, G. Vanderheiden, and I. Jacobs,
eds., 5 May 1999. This <acronym>WCAG</acronym> 1.0 Recommendation is
http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.</dd>
<dt><a id="ref-WCAG10-TECHS" name="ref-WCAG10-TECHS"><b>
[WCAG10-TECHS]</b></a></dt>
<dd><a href="http://www.w3.org/TR/WCAG10-TECHS/">"Techniques for Web Content
Accessibility Guidelines 1.0"</a>, W. Chisholm, G. Vanderheiden, I. Jacobs,
eds. This document explains how to implement the checkpoints defined in "Web
Content Accessibility Guidelines 1.0". The latest draft of the techniques is
available at http://www.w3.org/TR/WCAG10-TECHS/.</dd>
</dl>
<h2>18 <a id="Resources" name="Resources">Resources</a></h2>
<p><strong>Note:</strong> <em>W3C does not guarantee the stability of any of
the following references outside of its control. These references are included
for convenience. References to products are not endorsements of those
products.</em></p>
<h3>18.1 <a id="OtherGuidelines" name="OtherGuidelines">Other
guidelines</a></h3>
<dl>
<dt><a id="ref-HACKER" name="ref-HACKER"><b>[HACKER]</b></a></dt>
<dd>Hacker, Diana. (1993). A Pocket Style Manual. St. Martin's Press, Inc. 175
Fifth Avenue, New York, NY 10010.</dd>
<dt><a id="ref-SPOOL" name="ref-SPOOL"><b>[SPOOL]</b></a></dt>
<dd>Spool, J.M., Sconlong, T., Schroeder, W., Snyder, C., DeAngelo, T. (1997).
Web Site Usability: A Designer's Guide User Interface Engineering, 800 Turnpike
St, Suite 101, North Andover, MA 01845.</dd>
<dt><a id="ref-UWSAG" name="ref-UWSAG"><b>[UWSAG]</b></a></dt>
<dd><a href="http://trace.wisc.edu/redirects/htmlgide/version8.htm">"The
Unified Web Site Accessibility Guidelines"</a>, G. Vanderheiden, W. Chisholm,
eds. The Unified Web Site Guidelines were compiled by the <a
href="http://www.tracecenter.org/">Trace R & D Center</a> at the University
of Wisconsin under funding from the National Institute on Disability and
Rehabilitation Research (NIDRR), U.S. Dept. of Education.</dd>
<dt><a id="ref-WALSH" name="ref-WALSH"><b>[WALSH]</b></a></dt>
<dd>Walsh, Norman. (1997). "A Guide to XML." In "XML: Principles, Tools, and
Techniques." Dan Connolly, Ed. O'Reilly & Associates, 101 Morris St,
Sebastopol, CA 95472. pp 97-107.</dd>
</dl>
<h3>18.2 <a id="ToolResources" name="ToolResources">User agents and other
tools</a></h3>
<p>A list of <a href="http://www.w3.org/WAI/References/Browsing">alternative
Web browsers</a> (assistive technologies and other user agents designed for
accessibility) is maintained at the WAI Web site.</p>
<dl>
<dt><a id="ref-ALTBROWSERS" name="ref-ALTBROWSERS"><b>
[ALTBROWSERS]</b></a></dt>
<dd><a href="http://www.w3.org/WAI/References/Browsing">"Alternative Web
Browsing"</a>. This page documents known support by user agents (including
assistive technologies) of some accessibility features listed in this document.
The page is available at http://www.w3.org/WAI/References/Browsing.</dd>
<dt><a id="ref-BOBBY" name="ref-BOBBY"><b>[BOBBY]</b></a></dt>
<dd><a href="http://www.cast.org/bobby/">Bobby</a> is an automatic
accessibility validation tool developed by <a href="http://www.cast.org/">
Cast</a>.</dd>
<dt><a id="ref-CSSVAL" name="ref-CSSVAL"><b>[CSSVAL]</b></a></dt>
<dd>The <a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation
Service</a>.</dd>
<dt><a id="ref-HOMEPAGEREADER" name="ref-HOMEPAGEREADER"><b>
[HOMEPAGEREADER]</b></a></dt>
<dd>IBM's <a href="http://www.austin.ibm.com/sns/hpr.html">Home Page
Reader</a>.</dd>
<dt><a id="ref-HTMLVAL" name="ref-HTMLVAL"><b>[HTMLVAL]</b></a></dt>
<dd>The <a href="http://validator.w3.org/">W3C HTML Validation
Service</a>.</dd>
<dt><a id="ref-JAWS" name="ref-JAWS"><b>[JAWS]</b></a></dt>
<dd>Henter-Joyce's <a href="http://www.hj.com/">Jaws</a> screen reader.</dd>
<dt><a id="ref-LYNX" name="ref-LYNX"><b>[LYNX]</b></a></dt>
<dd><a href="http://lynx.browser.org/">Lynx</a> is a text-only browser.</dd>
<dt><a id="ref-LYNXME" name="ref-LYNXME"><b>[LYNXME]</b></a></dt>
<dd><a href="http://ugweb.cs.ualberta.ca/~gerald/lynx-me.cgi">Lynx-me</a> is a
Lynx emulator.</dd>
<dt><a id="ref-LYNXVIEW" name="ref-LYNXVIEW"><b>[LYNXVIEW]</b></a></dt>
<dd><a href="http://www.delorie.com/web/lynxview.html">Lynx Viewer</a> is a
Lynx emulator.</dd>
<dt><a id="ref-PWWEBSPEAK" name="ref-PWWEBSPEAK"><b>[PWWEBSPEAK]</b></a></dt>
<dd>The Productivity Works' <a href="http://www.prodworks.com/">
pwWebSpeak</a>.</dd>
<dt><a id="ref-WAI-UA-SUPPORT" name="ref-WAI-UA-SUPPORT"><b>
[WAI-UA-SUPPORT]</b></a></dt>
<dd><a href="http://www.w3.org/WAI/Resources/WAI-UA-Support">User Agent Support
for Accessibility</a></dd>
<dt><a id="ref-WINVISION" name="ref-WINVISION"><b>[WINVISION]</b></a></dt>
<dd>Artic's <a href="http://www.artictech.com/">WinVision</a>.</dd>
</dl>
<h3>18.3 <a id="AccessResources" name="AccessResources">Accessibility
resources</a></h3>
<dl>
<dt><a id="ref-DVS" name="ref-DVS"><b>[DVS]</b></a></dt>
<dd><a href="http://www.wgbh.org/wgbh/access/dvs/">DVS Descriptive Video
Services</a>.</dd>
<dt><a id="ref-NCAM" name="ref-NCAM"><b>[NCAM]</b></a></dt>
<dd>The <a href="http://www.wgbh.org/wgbh/pages/ncam/">National Center for
Accessible Media</a> includes information about <a
href="http://www.wgbh.org/wgbh/pages/ncam/webaccess/captionedmovies.html">
captioning and audio description on the Web</a>.</dd>
<dt><a id="ref-TECHHEAD" name="ref-TECHHEAD"><b>[TECHHEAD]</b></a></dt>
<dd><a href="http://tech-head.com">Tech Head</a> provides some information
about the <a href="http://tech-head.com/fog.htm">Fog index</a> described in <a
href="#ref-SPOOL">[SPOOL]</a>.</dd>
<dt><a id="ref-WAI-ER" name="ref-WAI-ER"><b>[WAI-ER]</b></a></dt>
<dd>The <a href="http://www.w3.org/WAI/ER/">WAI Evaluation and Repair Working
Group</a></dd>
</dl>
<!--NewPage--><!-- this is for html2ps -->
<h2>19 <a id="Acknowledgments" name="Acknowledgments">Acknowledgments</a></h2>
<dl>
<dt>Web Content Guidelines Working Group Co-Chairs:</dt>
<dd><a href="mailto:jasonw@ariel.ucs.unimelb.edu.au">Jason White</a>,
University of Melbourne</dd>
<dd><a href="mailto:gv@tracecenter.org">Gregg Vanderheiden</a>, Trace Research
and Development</dd>
<dt>W3C Team contact:</dt>
<dd><a href="mailto:wendy@w3.org">Wendy Chisholm</a></dd>
<dt>We wish to thank the following people who have contributed their time and
valuable comments to shaping these guidelines:</dt>
<dd>Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al
Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard
Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Chuck Letourneau,
Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile,
MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles
Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam
Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve
Tyler, and Jaap van Lelieveld</dd>
</dl>
<p><a href="http://www.w3.org/WAI/WCAG1AAA-Conformance"
title="Explanation of Level Triple-A Conformance"><img class="conform"
height="32" width="88" src="http://www.w3.org/WAI/wcag1AAA"
alt="Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" />
</a></p>
<div class="navbar"><map id="navbar-bottom" name="navbar-bottom"
title="Navigation Bar">
<hr class="navbar" title="Navigation area separator" />
<p>[<a href="#toc">contents</a>] </p>
</map></div>
</body>
</html>