forked from w3c/Mobile-A11y-Extension
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
349 lines (328 loc) · 20.6 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>DRAFT: Mobile Accessibility WCAG Extension</title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="additional.css"/>
<script src='https://www.w3.org/Tools/respec/respec-w3c-common'
async class='remove'></script>
<script class='remove'>
var respecConfig = {
// specification status (e.g. WD, LCWD, WG-NOTE, etc.). If in doubt use ED.
specStatus: "ED",
// the specification's short name, as in http://www.w3.org/TR/short-name/
shortName: "mobile-accessibility-extension",
// if your specification has a subtitle that goes below the main
// formal title, define it here
// subtitle : "an excellent document",
// if you wish the publication date to be other than the last modification, set this
// publishDate: "2009-08-06",
// if the specification's copyright date is a range of years, specify
// the start date here:
// copyrightStart: "2005"
// if there is a previously published draft, uncomment this and set its YYYY-MM-DD date
// and its maturity status
// previousPublishDate: "1977-03-15",
// previousMaturity: "WD",
// if there a publicly available Editor's Draft, this is the link
edDraftURI: "http://w3c.github.io/Mobile-A11y-Extension/",
// if this is a LCWD, uncomment and set the end of its review period
// lcEnd: "2009-08-05",
// editors, add as many as you like
// only "name" is required
editors: [
{
name: "Michael Cooper"
},
{
name: "Kim Patch"
},
{
name: "Jeanne Spellman"
},
{
name: "Kathy Wahlbin"
},
],
// name of the WG
wg: "Mobile Accessibililty Task Force",
// URI of the public WG page
wgURI: "http://www.w3.org/WAI/GL/mobile-a11y-tf/",
// name (without the @w3c.org) of the public mailing to which comments are due
wgPublicList: "public-mobile-a11y-tf",
// URI of the patent status for this WG, for Rec-track documents
// !!!! IMPORTANT !!!!
// This is important for Rec-track documents, do not copy a patent URI from a random
// document unless you know what you're doing. If in doubt ask your friendly neighbourhood
// Team Contact.
wgPatentURI: "@@-needs-statement-of-joint-WGs",
// !!!! IMPORTANT !!!! MAKE THE ABOVE BLINK IN YOUR HEAD
};
</script>
</head>
<body>
<section id='abstract'>
<p>
The Mobile Accessibility Extension to WCAG 2.0 provides new guidelines, success criteria, and mobile Techniques that are an addition to Web Content Accessibility Guidelines (WCAG) 2.0. This extension does not replace WCAG 2.0. </p>
</section>
<section id='sotd'>
<p><strong>This document is the internal working draft used by the Mobile Accessibility Task Force and is updated continuously and without notice. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</strong>
</p>
<p>This is an early draft of a document that will become a First Public Working Draft (FPWD) of the WCAG Extension on Mobile Accessibility. This document catalogs Mobile A11y Task Force proposed new mobile guidelines, success criteria and techniques. </p>
<p>This document is intended to become a normative extension of <a href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guideline (WCAG 2.0)</a> and is part of a series of technical and educational documents published by the <a href="http://www.w3.org/WAI/">W3C Web Accessibility Initiative (WAI)</a>. </p>
</section>
<section class="introductory">
<h2 id="intro">Introduction</h2>
<p>[to be drafted]</p>
</section>
<section>
<h2 class="principle" id="perceivable">Perceivable</h2>
<h3>Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.</h3>
<h4>1.1.1 Non-text Content</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M019">M019</a>: Providing media metadata</li>
</ul>
<h3>Guideline 1.2 Time-based Media: Provide alternatives for time-based media.</h3>
<h4>1.2.1 Audio-only and Video-only (Prerecorded)</h4>
<h4>1.2.2 Captions (Prerecorded)</h4>
<h4>1.2.3 Audio Description or Media Alternative (Prerecorded)</h4>
<h4>1.2.4 Captions (Live)</h4>
<h4>1.2.5 Audio Description (Prerecorded)</h4>
<h4>1.2.6 Sign Language (Prerecorded)</h4>
<h4>1.2.7 Extended Audio Description (Prerecorded)</h4>
<h4>1.2.8 Media Alternative (Prerecorded)</h4>
<h4>1.2.9 Audio-only (Live)</h4>
<div>
<h3>Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.</h3>
</div>
<h4>1.3.1 Info and Relationships</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M006">M006</a> <strong>Data Type: </strong>Specifying input type for numerical or character data</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M008">M008</a><strong> Data Mask:</strong> Set the virtual keyboard to the type of data entry required</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M023">M023</a>: Set the HTML virtual keyboard to the type of data entry required.</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M024">M024</a>: Set the iOS virtual keyboard to the type of data entry required.</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M025">M025</a>: Set the Android virtual keyboard to the type of data entry required.</li>
</ul>
<h4>1.3.2 Meaningful Sequence</h4>
<ul>
<li>[MOBILE] Changing between device orientations provide correct reading sequence</li>
</ul>
<h4>1.3.3 Sensory Characteristics</h4>
<ul>
<li>[MOBILE] Provide instructions to help users know the location of elements on the touch screen</li>
</ul>
<div>
<h3>Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background. </h3>
</div>
<h4>1.4.1 Use of Color</h4>
<h4>1.4.2 Audio Control</h4>
<h4>1.4.3 Contrast (Minimum)</h4>
<ul>
<li><strong>[MOBILE] Color Contrast: </strong>The default point size for mobile platforms might be larger than the default point size used on non-mobile devices. When determining which contrast ratio to follow, developers should strive to make sure to apply the lessened contrast ratio only when text is roughly equivalent to 1.2 times bold or 1.5 times (120% bold or 150%) that of the default platform size. </li>
</ul>
<h4>1.4.4 Resize text</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M013">M013</a>: Providing a way for users to change font size</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M021">M021</a>: <strong>Pinch Zoom:</strong> Setting viewport meta setting to allow magnification to 200%</li>
<li><strong>[MOBILE] Platform Text Size: </strong>Support for system fonts that follow platform level user preferences for text size to at least 200%.</li>
<li><strong>[MOBILE] On-Page Controls: </strong>Provide on-page controls to change the text size. </li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M016">M016</a>: Providing vertical navigation mechanisms that work without horizontal scrolling on narrow width screens</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M018">M018</a>: Ensuring that menu can be zoomed to 200%</li>
</ul>
<h4>1.4.5 Images of Text</h4>
<h4>1.4.6 Contrast (Enhanced)</h4>
<h4>1.4.7 Low or No Background Audio</h4>
<h4>1.4.8 Visual Presentation</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M009">M009</a>: Adapting the length of link texts to viewport width</li>
</ul>
<h4>1.4.9 Images of Text (No Exception) </h4>
</section>
<section>
<h2 class="principle" id="operable">Principle 2: Operable - User interface components and navigation must be operable.</h2>
<div>
<h3>Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard. </h3>
</div>
<h4>2.1.1 Keyboard</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M011">M011</a>: Ensuring that the interface can be used with a physical keyboard</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M014">M014</a>: Ensuring that navigation works on different screen sizes</li>
</ul>
<h4>2.1.2 No Keyboard Trap</h4>
<h4>2.1.3 Keyboard (No Exception)</h4>
<div>
<h3>Guideline 2.2 Enough Time: Provide users enough time to read and use content. </h3>
</div>
<h4>2.2.1 Timing Adjustable</h4>
<h4>2.2.2 Pause, Stop, Hide</h4>
<h4>2.2.3 No Timing</h4>
<h4>2.2.4 Interruptions</h4>
<h4>2.2.5 Re-authenticating</h4>
<div>
<h3><a name="seizure" id="seizure"> </a> Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures.</h3>
</div>
<h4>2.3.1 Three Flashes or Below Threshold</h4>
<h4>2.3.2 Three Flashes</h4>
<div>
<h3><a name="navigation-mechanisms" id="navigation-mechanisms"> </a> Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are. </h3>
</div>
<h4>2.4.1 Bypass Blocks</h4>
<h4>2.4.2 Page Titled</h4>
<h4>2.4.3 Focus Order</h4>
<h4>2.4.4 Link Purpose (In Context)</h4>
<h4>2.4.5 Multiple Ways</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M012">M012</a>: Including shortcuts to allow users to jump to sections of the page</li>
</ul>
<h4>2.4.6 Headings and Labels</h4>
<h4>2.4.7 Focus Visible</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M001">M001</a> <strong>Touch Focus</strong>: Defining the hover, focus, selected and touch (regular, long) states</li>
</ul>
<h4>2.4.8 Location</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M015">M015</a>: Providing a way for users to see what page they are on</li>
</ul>
<h4>2.4.9 Link Purpose (Link Only)</h4>
<h4>2.4.10 Section Headings </h4>
<section class="guideline"> </section>
<section class="guideline"> </section>
<section class="guideline">
<h3 id="touch-and-pointer">Guideline 2.5 Touch and Pointer: Make it easier for users to operate touch and pointer functionality. [MOBILE] </h3>
<section >
<div class="scinner">
<h4 id="sc-touch-with-AT" class="sc">2.5.1 Touch: All functionality that is operable through touch gestures, is also available with touch with system assistive technology</h4>
<h4>2.5.1 Touch: All functions available by touch are still available by touch after system assistive technology that remaps touch gestures is turned on. (Level A) [MOBILE]</h4>
<ul>
<li><strong>Techniques</strong>
<ul type="circle">
<li>Using standard one touch controls</li>
<li>Providing touch access for custom controls</li>
</ul>
</li>
<li><strong>Failures</strong>
<ul type="circle">
<li>Infinite scroll gesture is not available with system screen reader</li>
<li>Component can be opened but cannot be closed with touch when a system screen reader is running</li>
</ul>
</li>
</ul>
<h4>2.5.2 No Swipe Trap: When touch input behavior is modified by built-in assistive technology so that touch focus can be moved to a component of the page using swipe gestures, then focus can be moved away from that component using swipe gestures or the user is advised of the method for moving focus away. (Level A) [MOBILE]</h4>
<h4>2.5.3 Single Taps and Long Presses Revocable: Interface elements that require a single tap or a long press as input will only trigger the corresponding event when the finger is lifted inside that element. (Level A) [MOBILE]</h4>
<ul>
<li>[MOBILE] Touch events are only triggered when touch is removed from a control</li>
<li>[MOBILE] Failure of SC 2.5.3 due to activating a button on initial touch location rather than the final touch location</li>
</ul>
<h4>2.5.4 Touch Target Size: One dimension of any touch targt measures at least 9 mm except when the user has reduced the default scale of content. (Level AA) [MOBILE]</h4>
<ul>
<li><strong>[MOBILE] Multiple Elements: </strong>When multiple elements perform the same action or go to the same destination (e.g. link icon with link text), these should be contained within the same actionable element. This increases the touch target size for all users and benefits people with dexterity impairments. It also reduces the number of redundant focus targets, which benefits people using screen readers and keyboard/switch control.</li>
<li><a href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M002"> M002</a> <strong>Touch Target</strong>: Ensuring that touch targets are at least 9mm. </li>
</ul>
<h4>2.5.5 Touch Target Clearance: The center of each touch target has a distance of at least 9 mm from the center of any other touch target, except when the user has reduced the default scale of content. (Level AA) [MOBILE]</h4>
<ul>
<li><a href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M022"> M022</a> <strong>Spacing between elements</strong>. </li>
</ul>
<h4>2.5.6 Device manipulation: When device manipulation gestures are provided, touch and keyboard operable alternative control options are available. (Level AA) [MOBILE]</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M010">M010</a>: Allowing users to interact using device buttons (e.g. arrow keys, ok button) </li>
</ul>
</div>
</section>
</section>
</section>
<section>
<h2 class="principle" id="understandable">Principle 3: Understandable - Information and the operation of user interface must be understandable.</h2>
<div>
<h3>Guideline 3.1 Readable: Make text content readable and understandable. </h3>
</div>
<h4>3.1.1 Language of Page</h4>
<h4>3.1.2 Language of Parts</h4>
<h4>3.1.3 Unusual Words</h4>
<h4>3.1.4 Abbreviations</h4>
<h4>3.1.5 Reading Level</h4>
<h4>3.1.6 Pronunciation</h4>
<div>
<h3>Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways. </h3>
</div>
<h4>3.2.1 On Focus</h4>
<h4>3.2.2 On Input</h4>
<h4>3.2.3 Consistent Navigation</h4>
<ul>
<li><strong>[MOBILE] Navigation Bar: </strong>If the navigation bar is collapsed into a single icon, the entries in the drop-down list that appear when activating the icon are still in the same relative order as the full navigation menu.</li>
<li><strong>[MOBILE] Orientation Order: </strong>A Web site, when viewed on the different screen sizes and in different orientations, has some components that are hidden or appear in a different order. The components that show, however, remain consistent for any screen size and orientation.</li>
</ul>
<h4>3.2.4 Consistent Identification</h4>
<h4> 3.2.5 Change on Request</h4>
<div>
<h3>Guideline 3.3 Input Assistance: Help users avoid and correct mistakes. </h3>
</div>
<h4>3.3.1 Error Identification</h4>
<h4>3.3.2 Labels or Instructions</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M005">M005</a>: Providing instructions for custom functions and gestures (Instructions (e.g. overlays, tooltips, tutorials, etc.) should be provided to explain what gestures can be used to control a given interface and whether there are alternatives.)</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M020">M020</a>: Providing instructions for form data types</li>
</ul>
<h4>3.3.3 Error Suggestion</h4>
<h4>3.3.4 Error Prevention (Legal, Financial, Data)</h4>
<h4>3.3.5 Help</h4>
<h4>3.3.6 Error Prevention (All)</h4>
<div>
<h3>Guideline 3.4 Make content usable in device orientations.[MOBILE] </h3>
</div>
<h4>3.4.1 Expose Orientation: Changes in orientation are programmatically exposed to ensure assistive technology such as screen readers know the changes in layout. [MOBILE]</h4>
<div>
<h3><a name="distinguishable" id="distinguishable"> </a> Guideline 3.5 Make interactive elements distinguishable [MOBILE] </h3>
</div>
<h4>3.5.1 Triggers Distinguishable: Elements that trigger changes should be sufficiently distinct to be clearly distinguishable from non-actionable elements (content, status information, etc). [MOBILE]</h4>
<ul>
<li>
<div><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M004">M004</a>: Providing clear indication that elements are actionable / Design actionable objects to look actionable </div>
<ul>
<li>
<div><strong>Conventional Shape:</strong> Button shape (rounded corners, drop shadows), checkbox, select rectangle with arrow pointing downwards</div>
</li>
<li>
<div><strong>Iconography:</strong> conventional visual icons (question mark, home icon, burger icon for menu, floppy disk for save, back arrow, etc)</div>
</li>
<li>
<div><strong>Color Offset:</strong> shape with different background color to distinguish the element from the page background, different text color</div>
</li>
<li>
<div><strong>Conventional Style: </strong>Underlined text for links, color for links</div>
</li>
<li>
<div><strong>Conventional positioning:</strong> Commonly used position such as a top left position for back button (iOS), position of menu items within left-aligned lists in drop-down menus for navigation</div>
</li>
</ul>
</li>
</ul>
<p> </p>
</section>
<section>
<h2 class="principle" id="robust">Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.</h2>
<div>
<h3>Guideline 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.</h3>
</div>
<h4>4.1.1 Parsing </h4>
<h4>4.1.2 Name, Role, Value</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M017">M017</a>: Providing the open/closed state information in the menu icon</li>
</ul>
<h4> 4.1.3 Non-interference of AT: Content does not interfere with default functionality of platform level assistive technology [MOBILE]</h4>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M007">M007</a>: Supporting the characteristic properties of the platform (e.g. zoom, larger font, captions)</li>
</ul>
<div>
<h3>Techniques with No Home</h3>
</div>
<p><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M003">M003</a><strong> Touch Activation:</strong> Activating elements via the touchend event</p>
<p> </p>
</section>
<section class='appendix'>
<h2>Acknowledgements</h2>
<p>
Thanks to active members of the Task Force</p>
<p>Thanks to prior members of the Task Force</p>
</section>
</body>
</html>