forked from w3c/Mobile-A11y-Extension
-
Notifications
You must be signed in to change notification settings - Fork 0
/
touch.html
597 lines (553 loc) · 43.6 KB
/
touch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
<!DOCTYPE html>
<html lang="en" dir="ltr" typeof="bibo:Document " prefix="bibo: http://purl.org/ontology/bibo/ w3p: http://www.w3.org/2001/02pd/rec54#">
<head><meta lang="" property="dc:language" content="en">
<title>Mobile Accessibility WCAG Extension</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>/* --- ISSUES/NOTES --- */
div.issue-title, div.note-title , div.ednote-title, div.warning-title {
padding-right: 1em;
min-width: 7.5em;
color: #b9ab2d;
}
div.issue-title { color: #e05252; }
div.note-title, div.ednote-title { color: #2b2; }
div.warning-title { color: #f22; }
div.issue-title span, div.note-title span, div.ednote-title span, div.warning-title span {
text-transform: uppercase;
}
div.note, div.issue, div.ednote, div.warning {
margin-top: 1em;
margin-bottom: 1em;
}
.note > p:first-child, .ednote > p:first-child, .issue > p:first-child, .warning > p:first-child { margin-top: 0 }
.issue, .note, .ednote, .warning {
padding: .5em;
border-left-width: .5em;
border-left-style: solid;
}
div.issue, div.note , div.ednote, div.warning {
padding: 1em 1.2em 0.5em;
margin: 1em 0;
position: relative;
clear: both;
}
span.note, span.ednote, span.issue, span.warning { padding: .1em .5em .15em; }
.issue {
border-color: #e05252;
background: #fbe9e9;
}
.note, .ednote {
border-color: #52e052;
background: #e9fbe9;
}
.warning {
border-color: #f11;
border-width: .2em;
border-style: solid;
background: #fbe9e9;
}
.warning-title:before{
content: "⚠"; /*U+26A0 WARNING SIGN*/
font-size: 3em;
float: left;
height: 100%;
padding-right: .3em;
vertical-align: top;
margin-top: -0.5em;
}
li.task-list-item {
list-style: none;
}
input.task-list-item-checkbox {
margin: 0 0.35em 0.25em -1.6em;
vertical-align: middle;
}
</style><link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/W3C-WD">
<link rel="stylesheet" type="text/css" href="https://www.w3.org/TR/WCAG20/additional.css">
<style>
.proposed {background-color:#FFFFCC}
</style>
<link type="text/css" rel="stylesheet" href="chrome-extension://dagdlcijhfbmgkjokkjicnnfimlebcll/style.css"><script type="text/javascript" charset="utf-8" src="chrome-extension://dagdlcijhfbmgkjokkjicnnfimlebcll/page_context.js"></script><style>/*****************************************************************
* ReSpec 3 CSS
* Robin Berjon - http://berjon.com/
*****************************************************************/
/* --- INLINES --- */
em.rfc2119 {
text-transform: lowercase;
font-variant: small-caps;
font-style: normal;
color: #900;
}
h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym,
h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr {
border: none;
}
dfn {
font-weight: bold;
}
a.internalDFN {
color: inherit;
border-bottom: 1px solid #99c;
text-decoration: none;
}
a.externalDFN {
color: inherit;
border-bottom: 1px dotted #ccc;
text-decoration: none;
}
a.bibref {
text-decoration: none;
}
cite .bibref {
font-style: normal;
}
code {
color: #C83500;
}
/* --- TOC --- */
.toc a, .tof a {
text-decoration: none;
}
a .secno, a .figno {
color: #000;
}
ul.tof, ol.tof {
list-style: none outside none;
}
.caption {
margin-top: 0.5em;
font-style: italic;
}
/* --- TABLE --- */
table.simple {
border-spacing: 0;
border-collapse: collapse;
border-bottom: 3px solid #005a9c;
}
.simple th {
background: #005a9c;
color: #fff;
padding: 3px 5px;
text-align: left;
}
.simple th[scope="row"] {
background: inherit;
color: inherit;
border-top: 1px solid #ddd;
}
.simple td {
padding: 3px 10px;
border-top: 1px solid #ddd;
}
.simple tr:nth-child(even) {
background: #f0f6ff;
}
/* --- DL --- */
.section dd > p:first-child {
margin-top: 0;
}
.section dd > p:last-child {
margin-bottom: 0;
}
.section dd {
margin-bottom: 1em;
}
.section dl.attrs dd, .section dl.eldef dd {
margin-bottom: 0;
}
.respec-hidden {
display: none;
}
@media print {
.removeOnSave {
display: none;
}
}
</style><link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED"><!--[if lt IE 9]><script src='https://www.w3.org/2008/site/js/html5shiv.js'></script><![endif]--><script id="initialUserConfig" type="application/json">{
"specStatus": "ED",
"shortName": "mobile-accessibility-extension",
"edDraftURI": "http://w3c.github.io/Mobile-A11y-Extension/",
"editors": [
{
"name": "Michael Cooper"
},
{
"name": "Kim Patch"
},
{
"name": "Jeanne Spellman"
},
{
"name": "Kathy Wahlbin"
}
],
"wg": "Mobile Accessibililty Task Force",
"wgURI": "http://www.w3.org/WAI/GL/mobile-a11y-tf/",
"wgPublicList": "public-mobile-a11y-tf",
"wgPatentURI": "http://www.w3.org/2004/01/pp-impl/35422/status",
"maxTocLevel": 2
}</script></head>
<body link="#0563c1" dir="ltr" lang="en-US" screen_capture_injected="true" class="h-entry" role="document" id="respecDocument"><div class="head" role="contentinfo" id="respecHeader">
<p>
<a class="logo" href="http://www.w3.org/"><img width="72" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" alt="W3C"></a>
</p>
<h1 class="title p-name" id="title" property="dcterms:title">Touch and Pointer Accessibility</h1>
<h2 id="w3c-editor-s-draft-29-april-2016"><abbr title="World Wide Web Consortium">W3C</abbr> Editor's Draft <time property="dcterms:issued" class="dt-published" datetime="2016-04-29">2 May 2016</time></h2>
<dl>
<dt>This version:</dt>
<dd><a class="u-url" href="http://w3c.github.io/Mobile-A11y-Extension/touch.html">http://w3c.github.io/Mobile-A11y-Extension/touch.html</a></dd>
<dt>Latest published version:</dt>
<dd>N/A</dd>
<dt>Latest editor's draft (Github Repo):</dt>
<dd><a href="https://github.com/w3c/Mobile-A11y-Extension">https://github.com/w3c/Mobile-A11y-Extension</a></dd>
<dt>Editors:</dt>
<dd class="p-author h-card vcard" property="bibo:editor" resource="_:editor0"><span property="rdf:first" typeof="foaf:Person"><span property="foaf:name" class="p-name fn">Michael Cooper</span></span>
<span property="rdf:rest" resource="_:editor1"></span>
</dd>
<dd class="p-author h-card vcard" resource="_:editor1"><span property="rdf:first" typeof="foaf:Person"><span property="foaf:name" class="p-name fn">Kim Patch</span></span>
<span property="rdf:rest" resource="_:editor2"></span>
</dd>
<dd class="p-author h-card vcard" resource="_:editor2"><span property="rdf:first" typeof="foaf:Person"><span property="foaf:name" class="p-name fn">Jeanne Spellman</span></span>
<span property="rdf:rest" resource="_:editor3"></span>
</dd>
<dd class="p-author h-card vcard" resource="_:editor3"><span property="rdf:first" typeof="foaf:Person"><span property="foaf:name" class="p-name fn">Kathy Wahlbin</span></span>
<span property="rdf:rest" resource="rdf:nil"></span>
</dd>
</dl>
<p class="copyright">
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> ©
2016
<a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>
(<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>,
<a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>).
<abbr title="World Wide Web Consortium">W3C</abbr> <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> and
<a rel="license" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
rules apply.
</p>
<hr title="Separator for header">
</div>
<section id="abstract" class="introductory" property="dc:abstract"><h2 id="h-abstract" resource="#h-abstract"><span property="xhv:role" resource="xhv:heading">Abstract</span></h2>
<p>
The Touch and Pointer Guideline provides new success criteria, techniques and failures that are an addition to Web Content Accessibility Guidelines (WCAG) 2.0. This does not replace WCAG 2.0. </p>
</section><section id="sotd" class="introductory"><h2 id="h-sotd" resource="#h-sotd"><span property="xhv:role" resource="xhv:heading">Status of This Document</span></h2>
<p>
<em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical reports index</a> at http://www.w3.org/TR/.</em>
</p>
<h2 id="status">Status</h2>
<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 a draft of the Touch and Pointer Guideline, which catalogs a new mobile guideline on Touch and Pointer, its success criteria, Understanding entries, and Techniques proposed by the Mobile A11y Task Force of the WCAG Working Group. </p>
<p>When complete, 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> [<cite><a class="bibref" href="#bib-WCAG20">WCAG20</a></cite>]. This is part of a series of technical and educational documents published by the <a href="http://www.w3.org/WAI/"><abbr title="World Wide Web Consortium">W3C</abbr> Web Accessibility Initiative (WAI)</a>. </p>
<p>The Mobile Accessibility Task Force would particularly appreciate feedback on the following success criteria: </p>
<ol>
<li>Success Criteria 2.5.4 Target Size. Is it appropriate to have two different sizes for touch vs. pointer? Are the minimum sizes being proposed sufficient for people with dexterity or fine motor coordination disabilities? </li>
</ol>
<p>
This document was published by the <a href="http://www.w3.org/WAI/GL/mobile-a11y-tf/">Mobile Accessibililty Task Force</a> as an Editor's Draft.
If you wish to make comments regarding this document, please send them to
<a href="mailto:public-mobile-a11y-tf@w3.org">public-mobile-a11y-tf@w3.org</a>
(<a href="mailto:public-mobile-a11y-tf-request@w3.org?subject=subscribe">subscribe</a>,
<a href="http://lists.w3.org/Archives/Public/public-mobile-a11y-tf/">archives</a>) or create a Github issue at <a href="https://github.com/w3c/Mobile-A11y-Extension/issues">https://github.com/w3c/Mobile-A11y-Extension/issues</a>.
All comments are welcome. </p>
<p>
Publication as an Editor's Draft does not imply endorsement by the <abbr title="World Wide Web Consortium">W3C</abbr>
Membership. 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.
</p>
<p>
This document was produced by
a group
operating under the
<a id="sotd_patent" property="w3p:patentRules" href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 <abbr title="World Wide Web Consortium">W3C</abbr> Patent
Policy</a>.
<abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="http://www.w3.org/2004/01/pp-impl/35422/status" rel="disclosure">public list of any patent
disclosures</a>
made in connection with the deliverables of
the group; that page also includes
instructions for disclosing a patent. An individual who has actual knowledge of a patent
which the individual believes contains
<a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with
<a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>.
</p>
<p>This document is governed by the <a id="w3c_process_revision" href="http://www.w3.org/2015/Process-20150901/">1 September 2015 <abbr title="World Wide Web Consortium">W3C</abbr> Process Document</a>.
</p>
</section><nav id="toc"><h2 class="introductory" id="table-of-contents" resource="#table-of-contents"><span property="xhv:role" resource="xhv:heading">Table of Contents</span></h2><ul class="toc" role="directory"><li class="tocline">
<ul class="toc">
</ul>
</li>
<li class="tocline"><ul class="toc"><li class="tocline"><a href="#touch-and-pointer" class="tocxref">Guideline 2.5: Touch and Pointer: Make it easier for users to operate touch and pointer functionality. </a><ul class="toc">
<a href="#glossary" class="tocxref"><span class="secno">A. </span>Glossary</a>
</ul>
</li></ul></li>
<li class="tocline"><a href="#acknowledgements" class="tocxref"><span class="secno">B. </span>Acknowledgements</a></li>
<li class="tocline"><a href="#references" class="tocxref"><span class="secno">C. </span>References</a>
<ul class="toc">
<li class="tocline"><a href="#informative-references" class="tocxref"><span class="secno">C.1 </span>Informative references</a></li>
</ul>
</li>
</ul>
</nav>
<section class="introductory" typeof="bibo:Chapter" resource="#intro" property="bibo:hasPart">
<h2 id="intro" resource="#intro"><span property="xhv:role" resource="xhv:heading">Introduction</span></h2>
<p>The document provides guidance to improve accessibility for people with disabilities. While it generally applies to traditional mobile devices, it also applies to touch-enabled desktop devices, kiosks, tablets and other platforms that use technology beyond the traditional mouse and keyboard. While it is primarily oriented toward web and hybrid content, the guidelines and success criteria may also apply to native mobile applications. </p>
<h3 id="structure-of-this-document">Structure of this Document</h3>
<p>This version of the Touch and Pointer Accessibility Guideline is closely tied with WCAG. The early work of the task force focused on writing Techniques for WCAG that applied to mobile. Many existing WCAG techniques apply to mobile in current form and are listed in the Appendix of the <abbr title="World Wide Web Consortium">W3C</abbr> Working Group Note: <a href="https://www.w3.org/TR/mobile-accessibility-mapping/#wcag-techniques-that-apply-to-mobile">Mobile Accessibility: How WCAG 2.0 and Other <abbr title="World Wide Web Consortium">W3C</abbr>/WAI Guidelines Apply to Mobile</a>. </p>
<p>This new guideline, success criteria, and techniques are not in WCAG 2.0. It is being determined by the WCAG Working Group how this will be incorporated into WCAG 2.0. For convenience of discussion, the proposed Touch and Pointer Guideline has been tentatively numbered as 2.5, since the Task Force proposes that it belongs with WCAG Principle 2: Operable. </p>
</section>
<section class="principle" typeof="bibo:Chapter" resource="#perceivable" property="bibo:hasPart">
<!--OddPage--><h2 class="principle" id="perceivable" resource="#perceivable"><span property="xhv:role" resource="xhv:heading">Guideline 2.5: Touch and Pointer: Make it easier for users to operate touch and pointer functionality. </span></h2>
</section>
<section class="principle" typeof="bibo:Chapter" resource="#operable" property="bibo:hasPart">
<section class="guideline" typeof="bibo:Chapter" resource="#touch-and-pointer" property="bibo:hasPart">
<section class="understanding introductory" typeof="bibo:Chapter" resource="#intent-of-guideline-2.5" property="bibo:hasPart">
<h4 id="intent-of-guideline-2.5" resource="#intent-of-guideline-2.5"><span property="xhv:role" resource="xhv:heading">Intent of Guideline 2.5</span></h4>
<p><span class="proposed">[Proposed text for Understanding] </span>Platforms today can be operated through a number of different devices including touch, stylus, pen, in addition to mouse and keyboard. Some platforms such as a mobile device are designed to be primarily operated via gestures made on a touchscreen. Other devices can be operated by a number of different devices, such as a pen, stylus, or mouse, which may be generically referred to as a <a href="#def-pointer">pointer</a>. This section also applies to pointer events on non-mobile platforms.</p>
<p>
Mobile device design has evolved away from built-in physical keyboards (e.g. fixed, slide-out) towards devices that maximize touchscreen area and display an on-screen keyboard only when the user has selected a user interface control that accepts text input (e.g. a textbox). Pointer devices such as stylus, pen or pencil have also gained popularity for providing more precise touch. The mouse has been popular on desktop computers for decades.</p>
<p> Although the definition of "pointer" includes touch, we include touch and pointer for clarity. When we use the term touch, we just mean touch. </p>
</section>
<section class="sc" typeof="bibo:Chapter" resource="#sc-touch-with-AT" property="bibo:hasPart">
<h4 id="sc-touch-with-AT" class="sc" resource="#sc-touch-with-AT"><span property="xhv:role" resource="xhv:heading"><span class="secno">2.5.1 </span> Touch with Assistive Technology: All functions available by touch are still available by touch after platform assistive technology that remaps touch gestures is turned on. (Level A)</span></h4>
<section class="understanding" id="proposed-text-for-understanding-intent-of-this-success-criterion" typeof="bibo:Chapter" resource="#proposed-text-for-understanding-intent-of-this-success-criterion" property="bibo:hasPart">
<h5 id="h-proposed-text-for-understanding-intent-of-this-success-criterion" resource="#h-proposed-text-for-understanding-intent-of-this-success-criterion"><span property="xhv:role" resource="xhv:heading"><span class="proposed">[Proposed text for Understanding] </span> Intent of this Success Criterion</span></h5>
<p>The intent of this Success Criterion is to ensure that content can be operated using gestures on a touch screen with platform assistive technology.
Some assistive technology such as a screen reader will change the gestures that are used to interact with content when it is turned on. For example, on both iOS and Android platforms a a single swipe on the touch screen will activate the element that currently has focus. When the system screen reader is turned on, a single tap will move focus to that element and a double tap will activate the element.
All functions available by touch when the platform assistive technology is not turned on must be still available when the platform assistive technology is turned on.</p>
<p>Be familiar with your platform's system controls and standards for assistive technology. Use the system controls supported by the platform first and don't overwrite the standard gestures of the platform. Don't use a common gesture for a purpose that is not common. </p>
<h5 id="specific-benefits-of-success-criterion-2.5.1">Specific Benefits of Success Criterion 2.5.1</h5>
<ul>
<li>People who are blind who rely on the use of a screen reader while interacting with the touch screen</li>
<li>People with low vision who may also need speech turned on while interacting with the touch screen</li>
</ul>
<h5 id="examples-of-success-criterion-2.5.1">Examples of Success Criterion 2.5.1</h5>
<ul>
<li>If a developer assigns a double tap as a custom gesture, as the only way to complete an action, a user who is blind using VoiceOver will not have access to that action because VoiceOver reserves the double tap to select an item. </li>
<li>If a developer assigns a swipe right as the only way to open a menu, the VoiceOver user will not be able to do that action, because VoiceOver takes over the right swipe as a way to move from element to element. To avoid this problem, the developer could ensure there is a mobile menu button that works with touch as another way to bring up the menu.</li>
</ul>
<h5 id="related-resources">Related Resources</h5>
<ul>
<li><a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/InteractivityInput.html">Apple iOS Developer Library: Interactivity and Feedback</a></li>
<li><a href="https://developer.apple.com/library/ios/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html">Apple iOS Developer Library: Test Accessibility on Your Device with VoiceOver</a></li>
<li><a href="https://support.google.com/accessibility/android/answer/6151827?hl=en">Android Training: Using Touch Gestures</a></li>
<li><a href="http://developer.android.com/training/gestures/index.html">Google Android Accessibility Help: Use TalkBack gestures</a></li>
<li><a href="http://www.windowsphone.com/en-us/how-to/wp7/start/gestures-flick-pan-and-stretch">Windows Phone: Gestures: flick, pan, and stretch</a></li>
<li><a href="https://www.microsoft.com/en/mobile/accessibility/use-narrator-on-my-phone/">Microsoft: Use Narrator on my phone</a></li>
<li><a href="http://downloadcenter.samsung.com/content/UM/201503/20150303094626458/SM-G920F_UM_EU_Lollipop_Eng_Rev.1.0_150302.pdf">Samsung User Manual (pdf)</a></li>
</ul>
<p> </p>
<p>Resources are for information purposes only, no endorsement implied.</p>
<p>(none currently documented)</p>
<h5 id="techniques-and-failures-for-success-criterion-2.5.1">Techniques and Failures for Success Criterion 2.5.1</h5>
<ul>
<li><strong>Techniques</strong>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M028">M028</a> Using standard one-touch controls</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M027">M027</a> Providing touch access for custom controls</li>
</ul>
</li>
<li><strong>Failures</strong>
<ul>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/FM002">FM002</a> Infinite scroll gesture is not available with system screen reader</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/FM003">FM003</a> Component can be opened but cannot be closed with touch when a system screen reader is running</li>
</ul>
</li>
</ul>
</section>
</section>
<section class="sc" typeof="bibo:Chapter" resource="#swipe-trap" property="bibo:hasPart">
<h4 id="swipe-trap" resource="#swipe-trap"><span property="xhv:role" resource="xhv:heading"><span class="secno">2.5.2 </span> No Touch Trap: When touch input behavior is modified by platform assistive technology and focus can be moved to a component, then focus can be moved away from the component using sequential navigation gestures of assistive technology or the user is advised of the method for moving focus away in the sequential focus order. (Level A) </span></h4>
<section class="understanding" id="proposed-text-for-understanding-intent-of-this-success-criterion-1" typeof="bibo:Chapter" resource="#proposed-text-for-understanding-intent-of-this-success-criterion-1" property="bibo:hasPart">
<h5 class="intent" id="h-proposed-text-for-understanding-intent-of-this-success-criterion-1" resource="#h-proposed-text-for-understanding-intent-of-this-success-criterion-1"><span property="xhv:role" resource="xhv:heading"><span class="proposed">[Proposed text for Understanding] </span> Intent of this Success Criterion</span></h5>
<p>Swipe gestures are useful for displaying dynamic content. Giving focus to dynamic content via a swipe gesture also needs a gesture or method to move focus back to prior content — either by swiping to return or by informing the user of the method needed to return. These methods must work with assistive technology. Explore-by-touch is not a valid solution, because the user can then miss content without knowing it was missed. This success criterion is similar to WCAG 2.1.2 No Keyboard Trap, but it expands to all sequential navigation methods and compensates for touch-specific failure criteria. Relying on touch to explore features of mobile ATs to escape such a trap is still a failure under this criteria, because the next sequential item may be offscreen, an explore-by-touch gesture may cause users to get lost on the page, or the user may be relying on other means of sequential navigation such as a keyboard or switch control.</p>
<h5 class="benefit" id="specific-benefits-of-success-criterion-2.5.2">Specific Benefits of Success Criterion 2.5.2</h5>
<ul>
<li>Content that is after or outside of infinite scrolling content, or off the visible screen, can be accessed by screenreader users.</li>
</ul>
<h5 class="examples" id="examples-of-success-criterion-2.5.2">Examples of Success Criterion 2.5.2</h5>
<ul>
<li>Infinite scroll of content, where there is additional content in the footer, but the user with assistive technology (e.g. screenreader) cannot move focus to the footer and therefore cannot read the footer content, and may not even know that the footer content exists. </li>
<li>An infinite carousel advances with a swipe gesture. The instructions indicate that a touch outside the carousel will exit the carousel. The user can touch outside the carousel with assistive technology (e.g. screenreader) turned on.</li>
<li>Popup dialog that cannot be closed when assistive technology is turned on. </li>
</ul>
<h5 class="resources" id="related-resources-1">Related Resources</h5>
<p>Resources are for information purposes only, no endorsement implied.</p>
<p>(none currently documented)</p>
<h5 class="techniques" id="techniques-and-failures-for-success-criterion-2.5.2">Techniques and Failures for Success Criterion 2.5.2</h5>
<ul>
<li> <a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/FM003">FM003</a> Component can be opened but cannot be closed with touch when a system screen reader is running</li>
</ul>
</section>
</section>
<section class="sc" typeof="bibo:Chapter" resource="#independent-activation" property="bibo:hasPart">
<h4 id="independent-activation" resource="#independent-activation"><span property="xhv:role" resource="xhv:heading"><span class="secno">2.5.3 </span> Accidental Activation: </span></h4>
<h4 id="for-single-touch-and-pointer-activation-at-least-one-of-the-following-is-true-level-a"><span>For single touch and pointer activation, at least one of the following is true</span>: (Level A)
<section class="understanding" typeof="bibo:Chapter" resource="" property="bibo:hasPart">
</section>
</h4>
<h4 id="activation-is-on-the-up-event-either-explicitly-or-implicitly-as-a-platform-s-generic-activation-click-event-a-mechanism-is-available-that-allows-the-user-to-choose-the-up-event-as-an-option-confirmation-is-provided-which-can-dismiss-activation-activation-is-reversible-or-timing-of-activation-is-essential-and-waiting-for-the-up-event-would-invalidate-the-activity.x">
<ol>
<li>Activation is on the <u><a href="https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/Proposed_revision_of_2.5.3#up-event">up-event</a></u>, either explicitly or implicitly as a platform's generic activation/click event; </li>
<li>A mechanism is available that allows the user to choose the up-event as an option; </li>
<li>Confirmation is provided, which can dismiss activation; </li>
<li>Activation is reversible; or</li>
<li>Timing of activation is essential and waiting for the up-event would invalidate the activity. </li>
</ol>
</h4>
<p><strong>Note:</strong> This success criteria applies when platform assistive technology (e.g. screen reader) that remaps touch gestures is not turned on.</p>
<section class="understanding" id="proposed-text-for-understanding-intent-of-this-success-criterion-2" typeof="bibo:Chapter" resource="#proposed-text-for-understanding-intent-of-this-success-criterion-2" property="bibo:hasPart">
<h5 class="intent" id="h-proposed-text-for-understanding-intent-of-this-success-criterion-2" resource="#h-proposed-text-for-understanding-intent-of-this-success-criterion-2"><span property="xhv:role" resource="xhv:heading"><span class="proposed">[Proposed text for Understanding] </span> Intent of this Success Criterion</span></h5>
<p>People with various disabilities can inadvertently initiate touch or mouse events with unwanted results. Up-event activation refers to the activation of a component when the trigger stimulus is released. For example, for touchscreen interaction the event is triggered when a finger is lifted from the touchscreen at the end of a tap. There is a distinction between a finger initially touching a place on the screen and a finger being lifted from that place on the screen. With a mouse there is a similar difference between mousedown (initiating a click) and mouseup (releasing the finger). Authors can reduce the problem of users inadvertently triggering an action by making activation on the up-event. This gives the user the opportunity to move a finger (or mouse/pointer), away from a wrong target that's been hit. If touchdown activation is necessary, there are several options:</p>
<ul>
<li> A confirmation alert allows the user to change their mind </li>
<li> An undo button or other mechanism allows the user to reverse the action. </li>
<li> A setting in preferences allows the user to choose whether activation happens on the down or up event. </li>
</ul>
<p>Generic platform activation/click events generally trigger on up and when they do, they are also allowed. For example, in the case of mouse interactions, the "click" event in JavaScript triggers on release of the primary mouse button, and is an example of an implicit up-event. An exception would be an activity that would be invalid if activation waited for the up-event. Examples of this could include a piano program or a program for shooting skeets where waiting for the "up" event would invalidate the activation. Long press activation and 3D touch can be used as long as one of the above listed alternatives is present, and there is another conforming way to provide the action performed by the control.</p>
<p>Anywhere where we say "touch and pointer" we recognize that touch is included in the definition of pointer, but we include touch for clarity and ease of reading. </p>
<p>On different platforms the up-event may be called different things, such as touchend, onclick or mouseup.</p>
<h5 class="benefit" id="specific-benefits-of-success-criterion-2.5.3">Specific Benefits of Success Criterion 2.5.3</h5>
<ul>
<li>Makes it easier for all users to recover from hitting the wrong target.</li>
<li>Helps people with visual disabilities, cognitive limitations, and motor impairments by reducing the chance that a control will be accidentally activated or an action will occur unexpectedly.</li>
<li>Individuals who are unable to detect changes of context are less likely to become disoriented while navigating a site</li>
</ul>
<h5 class="examples" id="examples-of-success-criterion-2.5.3">Examples of Success Criterion 2.5.3</h5>
<ul>
<li>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. </li>
<li>The user interface control performs an action when the user lifts the finger away from the control rather than when the user first touches the control.</li>
<li>A phone-dialing application has number keys that are activated on touchdown. A user can undo an unwanted number by hitting the backspace button to delete a mistaken digit. </li>
</ul>
<h5 class="resources" id="related-resources-2">Related Resources</h5>
<p>Resources are for information purposes only, no endorsement implied.</p>
<p>(none currently documented)</p>
<h5 class="techniques" id="techniques-and-failures-for-success-criterion-2.5.3">Techniques and Failures for Success Criterion 2.5.3</h5>
<ul>
<li><a rel="nofollow" href="https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/M029">M029</a> @@wiki link@@ Touch events are only triggered when touch is removed from a control</li>
<li><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/FM001">FM001</a> Failure of SC 2.5.3 due to activating a button on initial touch location rather than the final touch location</li>
<li>Failure @@to be written@@: Actions are only available through long press or 3D touch</li>
</ul>
</section>
</section>
<section class="sc" typeof="bibo:Chapter" resource="#touch_target_size" property="bibo:hasPart">
<h4 id="touch_target_size" resource="#touch_target_size"><span property="xhv:role" resource="xhv:heading"><span class="secno">2.5.4 </span> Target Size: The size of the <a href="#def-target">target</a> in relation to the visible display at the default viewport size is at least: (Level AA)
<ul>
<li>44px by 44px for touch inputs</li>
<li>20px by 20px for mouse/pointer inputs</li>
</ul>
where px is a CSS <a href="#def-pixel">pixel</a>. </span></h4>
<p>Note: In situations where both touch and pointer/mouse input mechanisms are present, without manual or automatic input detection, controls must follow the larger minimum dimensions for touch input.</p>
<p>Note: This success criteria applies when platform assistive technology (e.g. magnification) is not turned on.</p>
<p>Editor's Note: We are researching the 20px value for mouse/pointer and 44px for touch. We are seeking research on this and outside input. We also have to define the difference between a touch event and a mouse event, particularly in html and responsive environments.</p>
<p> </p>
<section class="understanding" typeof="bibo:Chapter" resource="" property="bibo:hasPart">
</section>
<section class="understanding" id="proposed-text-for-understanding-intent-of-this-success-criterion-3" typeof="bibo:Chapter" resource="#proposed-text-for-understanding-intent-of-this-success-criterion-3" property="bibo:hasPart">
<h5 class="intent" id="h-proposed-text-for-understanding-intent-of-this-success-criterion-3" resource="#h-proposed-text-for-understanding-intent-of-this-success-criterion-3"><span property="xhv:role" resource="xhv:heading"><span class="proposed">[Proposed text for Understanding] </span>
Intent of this Success Criterion</span></h5>
<p>The intent of this success criteria is to help users who may have trouble activating a small target because of hand tremours, limited dexterity or other reasons. Mice and pointing devices can be hard to use for these users, and a larger target will help them greatly in having positive outcomes on the web page. If the target is too small, it may be difficult to aim at the target. This can be further complicated on responsive sites that double as mobile content where the same input will be used with touch. A finger is larger than mouse pointer, and needs a larger target. Touch screens are a primary method of user input on mobile devices. User interface controls must be big enough to capture finger touch actions. The minimum recommended touch target size is 44px by 44px, but a larger touch target is recommended to reduce the possibility of unintentional actions. This is particularly if any of the following are true:
</p><ul>
<li>The control is used frequently
</li><li>The result of the touch cannot be easily undone
</li><li>The control is positioned where it will be difficult to reach, or is near the edge of the screen
</li><li>The control is part of a sequential task
<h5 class="benefit" id="specific-benefits-of-success-criterion-2.5.4">Specific Benefits of Success Criterion 2.5.4</h5>
<ul>
<li>Users with mobility impairments, such as hand tremors</li>
<li>Users who find fine motor movements difficult </li>
<li>Users who access a device using one hand </li>
<li>Users with large fingers </li>
<li>Users who have low vision may better see the target</li>
</ul>
<h5 class="examples" id="examples-of-success-criterion-2.5.4">Examples of Success Criterion 2.5.4</h5>
<ul>
<li>Three buttons are on-screen and the visible portion of each button is 44px by 44px</li>
</ul>
<h5 class="resources" id="related-resources-3">Related Resources</h5>
<ul>
<li>Apple touch target size recommendations</li>
<li>Android touch target size recommendations</li>
<li><a href="http://touchlab.mit.edu/publications/2003_009.pdf">Human Fingertips to Investigate the Mechanics of Tactile Sense</a> (PDF)</li>
<li><a href="http://hcil.cs.umd.edu/trs/2006-11/2006-11.htm">One-Handed Thumb Use on Small Touchscreen Devices</a> </li>
<li><a href="http://blogs.msdn.com/b/ie/archive/2012/04/20/guidelines-for-building-touch-friendly-sites.aspx">Microsoft Guidelines for Building Touch Friendly Sites</a>
</li></ul>
<h5 class="techniques" id="techniques-and-failures-for-success-criterion-2.5.4">Techniques and Failures for Success Criterion 2.5.4</h5>
<ul>
<li><strong><a rel="nofollow" href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M030">M030</a> 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 44px by 44px. </li>
<li><a href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/FM005">FM005</a> Failure: touch target is less than 44px x 44px at the default viewport size</li>
</ul>
</li></ul></section>
</section>
</section>
<section class="guideline" typeof="bibo:Chapter" resource="#touch-and-pointer" property="bibo:hasPart"></section>
</section>
<section id="techniques-with-no-home" typeof="bibo:Chapter" resource="#techniques-with-no-home" property="bibo:hasPart">
<p> </p>
</section>
<section id="glossary" class="appendix" typeof="bibo:Chapter" resource="#glossary" property="bibo:hasPart">
<!--OddPage--><h2 id="h-glossary" resource="#h-glossary"><span property="xhv:role" resource="xhv:heading"><span class="secno">A. </span>Glossary</span></h2>
<dl>
<dt id="def-device-manipulation"><dfn data-dfn-type="dfn" id="dfn-device-manipulation">device manipulation</dfn></dt>
<dd>Moving or controlling the device with hands, body or machine. Device manipulation includes other methods of controling input to the mobile device outside of using the touch screen. This includes pressing a physical button on the device, shaking, holding, proximity, touch, walking, angle of holding, input via the accelerometer.
Gestures to the camera and voice input to the microphone are addressed
separately. </dd>
<dt id="def-pixel"><dfn data-dfn-type="dfn" id="dfn-pixel">pixel</dfn></dt>
<dd>A CSS pixel based on the ideal viewport device-width. [editor note: we need a better definition of CSS pixel].
</dd><dt id-"def-platform-assistive-technology"=""><dfn data-dfn-type="dfn" id="dfn-platform-assistive-technology">platform assistive technology</dfn> </dt>
<dd>Platform assistive technology is built into the operating system and is generally updated through OS updates. Examples include VoiceOver on iOS and TalkBack on Android. </dd>
<dt><dfn data-dfn-type="dfn" id="dfn-pointer">pointer</dfn></dt>
<dd>A pointer is a hardware-agnostic representation of input devices that can target a specific coordinate (or set of coordinates) on a screen. [Pointer Events] https://www.w3.org/TR/pointerevents/#dfn-pointer</dd>
<dt id="def-target"><dfn data-dfn-type="dfn" id="dfn-target"> target</dfn></dt>
<dd>Region of the display that will accept a touch action. If a portion of a touch target is overlapped by another touch target such that it cannot receive touch actions, then that portion is not considered a touch target for purposes of touch target measurements.</dd>
<dt><dfn data-dfn-type="dfn" id="dfn-touchend">touchend</dfn></dt>
<dd>see "<a href="#def-up-event">up event</a>"</dd>
<dt id="def-up-event"><dfn data-dfn-type="dfn" id="dfn-up-event-touchend-event">Up event, TouchEnd event</dfn>
</dt>
<dd>The activation of a component when the trigger stimulus is released. Example: For touchscreen interaction, the event is triggered when a finger is lifted from the touchscreen at the end of a tap.</dd>
</dl>
</section>
<section class="appendix" id="acknowledgements" typeof="bibo:Chapter" resource="#acknowledgements" property="bibo:hasPart">
<!--OddPage--><h2 id="h-acknowledgements" resource="#h-acknowledgements"><span property="xhv:role" resource="xhv:heading"><span class="secno">B. </span>Acknowledgements</span></h2>
<p>
Thanks to current members of the Task Force</p>
<p>Allan, Jim<br>
Avila, Jonathan<br>
Babinszki, Tom<br>
Brough, Matthew<br>
Cooper, Michael<br>
Fischer, Detlev<br>
Foliot, John<br>
Garrison, Alistair<br>
Johlic, Marc<br>
Kirkpatrick, Andrew<br>
Lauke, Patrick<br>
MacDonald, David<br>
McMeeking, Chris<br>
Patch, Kimberly<br>
Pluke, Mike<br>
Richards, Jan<br>
Smith, Alan<br>
Spellman, Jeanne <br>
Vaishnav, Jatin<br>
Velleman, Eric<br>
Wahlbin, Kathleen</p>
<p>Thanks to prior members of the Task Force</p>
<p>Anderson, Kathleen<br>
Evans, Gavin<br>
Kaja, Kiran<br>
LaHart, Andrew<br>
McGrane, Karen<br>
Shebanek, Mike<br>
Shiver, Brent<br>
Thiessen, Peter<br>
Wu, Wei<br>
Zehe, Marco</p>
</section>
<section id="references" class="appendix" typeof="bibo:Chapter" resource="#references" property="bibo:hasPart"><!--OddPage--><h2 id="h-references" resource="#h-references"><span property="xhv:role" resource="xhv:heading"><span class="secno">C. </span>References</span></h2><section id="informative-references" typeof="bibo:Chapter" resource="#informative-references" property="bibo:hasPart"><h3 id="h-informative-references" resource="#h-informative-references"><span property="xhv:role" resource="xhv:heading"><span class="secno">C.1 </span>Informative references</span></h3><dl class="bibliography" resource=""><dt id="bib-WCAG20">[WCAG20]</dt><dd>Ben Caldwell; Michael Cooper; Loretta Guarino Reid; Gregg Vanderheiden et al. W3C. <a href="http://www.w3.org/TR/WCAG20/" property="dc:references"><cite>Web Content Accessibility Guidelines (WCAG) 2.0</cite></a>. 11 December 2008. W3C Recommendation. URL: <a href="http://www.w3.org/TR/WCAG20/" property="dc:references">http://www.w3.org/TR/WCAG20/</a>
</dd></dl></section></section><p role="navigation" id="back-to-top"><a href="#toc"><abbr title="Back to Top">↑</abbr></a></p><script async="" defer="" src="https://www.w3.org/scripts/TR/2016/fixup.js"></script></body></html>