-
Notifications
You must be signed in to change notification settings - Fork 266
/
Copy pathcontent-structure-separation-programmatic.xml
479 lines (478 loc) · 22.8 KB
/
content-structure-separation-programmatic.xml
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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE div2
SYSTEM "../xmlspec.dtd">
<div2 id="content-structure-separation-programmatic" role="extsrc">
<head>1.3.1</head>
<div3 role="intent">
<head>Intent of this Success Criterion</head>
<p>The intent of this Success Criterion is to ensure that information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes. For example, the presentation format changes when the content is read by a screen reader or when a user style sheet is substituted for the style sheet provided by the author.</p>
<p>
Sighted users perceive structure and relationships through various visual cues — headings are often in a larger, bold font separated from paragraphs by blank lines; list items are preceded by a bullet and perhaps indented; paragraphs are separated by a blank line; items that share a common characteristic are organized into tabular rows and columns; form fields may be positioned as groups that share text labels; a different background color may be used to indicate that several items are related to each other; words that have special status are indicated by changing the font family and /or bolding, italicizing, or underlining them; items that share a common characteristic are organized into a table where the relationship of cells sharing the same row or column and the relationship of each cell to its row and/or column header are necessary for understanding; and so on. Having these structures and these relationships programmatically determined or available in text ensures that information important for comprehension will be perceivable to all.
</p>
<p>Auditory cues may be used as well. For example, a chime might indicate the beginning of a new section; a change in voice pitch or speech rate may be used to emphasize important information or to indicate quoted text; etc.</p>
<p>
When such relationships are perceivable to one set of users, those relationships can be made to be perceivable to all. One method of determining whether or not information has been properly provided to all users is to access the information serially in different modalities.
</p>
<p>If links to glossary items are implemented using anchor elements (or the proper link element for the technology in use) and identified using a different font face, a screen reader user will hear that the item is a link when the glossary term is encountered even though they may not receive information about the change in font face. An on-line catalog may indicate prices using a larger font colored red. A screen reader or person who cannot perceive red, still has the information about the price as long as it is preceded by the currency symbol.</p>
<p>Some technologies do not provide a means to programmatically determine some types of information and relationships. In that case then there should be a text description of the information and relationships. For instance, "all required fields are marked with an asterisk (*)". The text description should be near the information it is describing (when the page is linearized), such as in the parent element or in the adjacent element.</p>
<p>There may also be cases where it may be a judgment call as to whether the relationships should be programmatically determined or be presented in text. However, when technologies support programmatic relationships, it is strongly encouraged that information and relationships be programmatically determined rather than described in text.</p>
<note>
<p>It is not required that color values be programmatically determined. The information conveyed by color cannot be adequately presented simply by exposing the value. Therefore, <loc href="visual-audio-contrast-without-color"
linktype="guideline">Success Criterion 1.4.1
</loc> addresses the specific case of color, rather than Success Criterion 1.3.1.
</p>
</note>
<div4 role="benefits">
<head>Benefits: How Success Criterion 1.3.1 helps people with disabilities</head>
<ulist>
<item>
<p>This Success Criterion helps people with different disabilities by allowing user agents to adapt content according to the needs of individual users.
</p>
</item>
<item>
<p>Users who are blind (using a screen reader) benefit when information conveyed through color is also available in text (including text alternatives for images that use color to convey information).</p>
</item>
<item>
<p>Users who are deaf-blind using braille (text) refreshable displays may be unable to access color-dependent information.</p>
</item>
</ulist>
</div4>
</div3>
<div3 role="examples">
<head>Examples of Success Criterion 1.3.1</head>
<ulist>
<item>
<p>
<emph role="bold">
A form with required fields
</emph>
</p>
<p>
A form contains several required fields. The labels for the required fields are displayed in red. In addition, at the end of each label is an asterisk character, *. The instructions for completing the form indicate that "all required fields are displayed in red and marked with an asterisk *", followed by an example.
</p>
</item>
<item>
<p>
<emph role="bold">A form that uses color and text to indicate required fields</emph>
</p>
<p>A form contains both required and optional fields. Instructions at the top of the form explain that required fields are labeled with red text and also with an icon whose text alternative says, "Required." Both the red text and the icon are programmatically associated with the appropriate form fields so that assistive technology users can determine the required fields.
</p>
</item>
<item>
<p>
<emph role="bold">A bus schedule table where the headers for each cell can be programmatically determined</emph>
</p>
<p>A bus schedule consists of a table with the bus stops listed vertically in the first column and the different buses listed horizontally across the first row. Each cell contains the time when the bus will be at that bus stop. The bus stop and bus cells are identified as headers for their corresponding row or column so that assistive technology can programmatically determine which bus and which bus stop are associated with the time in each cell.
</p>
</item>
<item>
<p>
<emph role="bold">A form where the labels for the checkboxes can be programmatically determined</emph>
</p>
<p>In a form, the labels for each checkbox can be programmatically determined by assistive technology.
</p>
</item>
<item>
<p>
<emph role="bold">A text document</emph>
</p>
<p>A simple text document is formatted with double blank lines before titles, asterisks to indicate list items and other standard formatting conventions so that its structure can be programmatically determined.
</p>
</item>
</ulist>
</div3>
<div3 role="resources">
<head>Resources</head>
<ulist>
<item>
<p>
<loc href="http://webaim.org/techniques/semanticstructure/">WebAIM: Semantic Structure</loc>
</p>
</item>
<item>
<p>
<loc href="http://accessibility.psu.edu/headingshtml/">Heading Tags</loc>
</p>
</item>
</ulist>
</div3>
<div3 role="techniques">
<head>Techniques for Addressing Success Criterion 1.3.1</head>
<div4 role="sufficient">
<head/>
<div5 role="situation">
<head>Situation A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:</head>
<olist>
<item>
<p>
<loc href="ARIA11"
linktype="aria"/>
</p>
</item>
<item>
<p>
<loc href="ARIA12"
linktype="aria"/>
</p>
</item>
<item>
<p>
<loc href="ARIA13"
linktype="aria"/>
</p>
</item>
<item>
<p>
<loc href="ARIA16"
linktype="aria"/>
</p>
</item>
<item>
<p>
<loc href="ARIA17"
linktype="aria"/>
</p>
</item>
<item>
<p>
<loc href="ARIA20"
linktype="aria"/>
</p>
</item>
<item>
<p>
<loc href="G115"
linktype="general">Using semantic elements to mark up structure</loc>
<emph role="bold">AND</emph>
<loc href="H49" linktype="html">H49 Using semantic markup to mark emphasized or special text</loc>
</p>
</item>
<item>
<p>
<loc href="G117"
linktype="general">Using text to convey information that is conveyed by variations in presentation of text</loc>
</p>
</item>
<item>
<p>
<loc href="G140"
linktype="general">Separating information and structure from presentation to enable different presentations</loc>
</p>
</item>
<item>
<p>Making information and relationships conveyed through presentation programmatically determinable using the following techniques:</p>
<ulist>
<item>
<p>
<loc href="G138"
linktype="general">Using semantic markup whenever color cues are used</loc>
</p>
</item>
<item>
<p>
<loc href="H51" linktype="html">Using table markup to present tabular information</loc>
</p>
</item>
<item>
<p>
<loc href="PDF6" linktype="pdf"/>
</p>
</item>
<item>
<p>
<loc href="PDF20" linktype="pdf"/>
</p>
</item>
<item>
<p>
<loc href="H39" linktype="html">Using caption elements to associate data table captions with data tables</loc>
</p>
</item>
<item>
<p>
<loc href="FLASH31"
linktype="flash">Specifying caption text for a DataGrid</loc>
</p>
</item>
<item>
<p>
<loc href="H73" linktype="html">Using the summary attribute of the table element to give an overview of data tables</loc>
</p>
</item>
<item>
<p>
<loc href="FLASH23"
linktype="flash">Adding summary information to a DataGrid</loc>
</p>
</item>
<item>
<p>
<loc href="H63" linktype="html">Using the scope attribute to associate header cells and data cells in data tables</loc>
</p>
</item>
<item>
<p>
<loc href="H43" linktype="html">Using id and headers attributes to associate data cells with header cells in data tables</loc>
</p>
</item>
<item>
<p>
<loc href="FLASH21"
linktype="flash">Using the DataGrid component to associate column headers with cells</loc>
</p>
</item>
<item>
<p>
<loc href="H44" linktype="html">Using label elements to associate text labels with form controls</loc>
</p>
</item>
<item>
<p>
<loc href="H65" linktype="html">Using the title attribute to identify form controls when the label element cannot be used</loc>
</p>
</item>
<item>
<p>
<loc href="PDF10" linktype="pdf"/>
</p>
</item>
<item>
<p>
<loc href="PDF12" linktype="pdf"/>
</p>
</item>
<item>
<p>
<loc href="FLASH32"
linktype="flash">Using auto labeling to associate text labels with form controls</loc>
</p>
</item>
<item>
<p>
<loc href="FLASH29"
linktype="flash">Setting the label property for form components</loc>
</p>
</item>
<item>
<p>
<loc href="FLASH25"
linktype="flash">Labeling a form control by setting its accessible name</loc>
</p>
</item>
<item>
<p>
<loc href="H71" linktype="html">Providing a label for groups of radio buttons or checkboxes using the fieldset and legend elements</loc>
</p>
</item>
<item>
<p>
<loc href="SL20"
linktype="silverlight"/>
</p>
</item>
<item>
<p>
<loc href="SL26"
linktype="silverlight"/>
</p>
</item>
<item>
<p>
<loc href="H85" linktype="html">Using OPTGROUP to group OPTION elements inside a SELECT</loc>
</p>
</item>
<item>
<p>
<loc href="H48" linktype="html">Using ol, ul and dl for lists</loc>
</p>
</item>
<item>
<p>
<loc href="H42" linktype="html">Using h1-h6 to identify headings</loc>
</p>
</item>
<item>
<p>
<loc href="PDF9" linktype="pdf"/>
</p>
</item>
<item>
<p>
<loc href="SCR21"
linktype="script">Using functions of the Document Object Model (DOM) to add content to a page</loc>
</p>
</item>
<item>
<p>
<loc href="PDF11" linktype="pdf"/>
</p>
</item>
<item>
<p>
<loc href="PDF17" linktype="pdf"/>
</p>
</item>
<item>
<p>
<loc href="PDF21" linktype="pdf"/>
</p>
</item>
<item>
<p>
<loc href="H97" linktype="html"/>
</p>
</item>
</ulist>
</item>
</olist>
</div5>
<div5 role="situation">
<head> Situation B: The technology in use does NOT provide the semantic structure to make the information and relationships conveyed through presentation programmatically determinable:</head>
<olist>
<item>
<p>
<loc href="G117"
linktype="general">Using text to convey information that is conveyed by variations in presentation of text</loc>
</p>
</item>
<item>
<p>
<loc href="FLASH8"
linktype="flash">Adding a group name to the accessible name of a form control</loc>
</p>
</item>
<item>
<p>Making information and relationships conveyed through presentation programmatically determinable or available in text using the following techniques:</p>
<ulist>
<item>
<p>
<loc href="T1" linktype="text">Using standard text formatting conventions for paragraphs</loc>
</p>
</item>
<item>
<p>
<loc href="T2" linktype="text">Using standard text formatting conventions for lists</loc>
</p>
</item>
<item>
<p>
<loc href="T3" linktype="text">Using standard text formatting conventions for headings</loc>
</p>
</item>
</ulist>
</item>
</olist>
</div5>
</div4>
<div4 role="tech-optional">
<head>Additional Techniques (Advisory) for 1.3.1</head>
<ulist>
<item role="css">
<p>
<loc href="C22" linktype="css">Using CSS to control visual presentation of text</loc>
</p>
</item>
<item role="css">
<p>Using CSS rather than tables for page layout (future link)</p>
</item>
<item>
<p>
<loc href="G162"
linktype="general">Positioning labels to maximize predictability of relationships</loc>
</p>
</item>
<item>
<p>
<loc href="ARIA1" linktype="aria">ARIA1: Using Accessible Rich Internet Application describedby property to provide a descriptive, programmatically determined label</loc>
</p>
</item>
<item>
<p>
<loc href="ARIA2" linktype="aria">Using Dynamic Web Content Accessibility to programmatically identify form fields as required</loc>
</p>
</item>
<item>
<p>Providing
labels for all form controls that do not have implicit labels (future link)
</p>
</item>
<item>
<p>
<loc href="G141"
linktype="general">G141</loc>
</p>
</item>
</ulist>
</div4>
<div4 role="failures">
<head>Common Failures Identified by the Working Group</head>
<ulist>
<item role="css">
<p>
<loc linktype="failure" href="F2">Failure due to using CSS to create variations in presentation of text that conveys information without also using the appropriate markup or text</loc>
</p>
</item>
<item>
<p>
<loc linktype="failure"
href="F33">Failure due to using white space characters to create multiple columns in plain text content</loc>
</p>
</item>
<item>
<p>
<loc href="F34"
linktype="failure">Failure due to using white space characters to format tables in plain text content</loc>
</p>
</item>
<item role="script">
<p>
<loc linktype="failure"
href="F42">Failure due to using scripting events to emulate links</loc>
</p>
</item>
<item>
<p>
<loc href="F43"
linktype="failure">Failure due to using structural markup in a way that does not represent relationships in the content</loc>
</p>
</item>
<item role="html">
<p>
<loc href="F46"
linktype="failure">Failure due to using th elements, caption elements, or non-empty summary attributes in layout tables</loc>
</p>
</item>
<item role="html">
<p>
<loc href="F48"
linktype="failure">Failure due to using the pre element to markup tabular information</loc>
</p>
</item>
<item role="html">
<p>
<loc href="F87"
linktype="failure"/>
</p>
</item>
<item role="html">
<p>
<loc href="F90"
linktype="failure"/>
</p>
</item>
<item role="html">
<p>
<loc href="F91"
linktype="failure"/>
</p>
</item>
<item role="html">
<p>
<loc href="F92"
linktype="failure"/>
</p>
</item>
</ulist>
</div4>
</div3>
</div2>