Disambiguation of path-based gesture versus dragging movement

understanding/21/pointer-gestures.html

@@ -20,36 +20,42 @@ <h2>In brief</h2>
 
 		<section id="intent">
 			<h2>Intent of this Success Criterion</h2>
+
 			<p>The intent of this success criterion is to ensure that content can be controlled with a range of pointing devices, abilities, and assistive technologies. Some people  cannot perform gestures in a precise manner, or they may use a specialized or adapted input device such as a head pointer, eye-gaze system, or speech-controlled mouse emulator. Some pointing methods lack the capability or accuracy to perform multipoint or path-based gestures.</p>
 
 			<p>A <strong>path-based gesture</strong> involves an interaction where not just the endpoints matter, but how the pointer moves between these points.</p>
 
-			<p>Swiping is an example of a <strong>path-based gesture</strong>, which is only recognized when the user moves in a (mostly) straight line from the start point to the end point.</p>
+			<p>Swiping is an example of a <strong>path-based gesture</strong>, which is only recognized when the user moves in a (mostly) straight line from the start-point to the end-point.</p>
+
+			<p>For many gestures, the exact start- and end-points themselves are not relevant – what matters is that the overall gesture (mostly) followed a particular path.
+				For instance, if a page implemented a horizontal "flick" gesture to move to the previous or next page, the exact point where the user starts the "flick" or ends it is irrelevant, as long as the "flick" gesture is horizontal, is of sufficient length, and is performed above a specific speed.</p>
+
+			<p>Examples of path-based gestures include swiping, "flicking", and other gestures which trace a prescribed path such as drawing a specific shape. Such paths may be drawn with a finger or stylus on a touchscreen, graphics tablet, or trackpad, or with a mouse, joystick, or similar pointer device.</p>
+
+      <h3>The difference between Pointer Gestures and Dragging</h3>
+
+			<p>In a path-based gesture, the actual path/direction (and possibly speed) that the pointer is moved matters. For some gestures, even the exact start- and end-points may not matter.</p>
 
-			<figure id="figure-path-based-gesture-1">
-				<img src="img/path-based-gesture-1.png" width="400" alt="Hand showing a starting touch, 1. Moving in a straight line to a second point, 2.">
+			<figure id="figure-path-based-gesture">
+				<img src="img/2.5.1-path-based-gesture.png" width="400" alt="Illustration of a stylised finger on a hand touching an initial point 1, then moving in a straight horizontal line to a second point 2.">
 				<figcaption>A <strong>path-based gesture</strong> where pointer movement is only allowed in a straight line from the start-point to the end-point. If the user strays from the straight directional path, the gesture is not recognized, has no effect, or is aborted.</figcaption>
 			</figure>
 
-			<p>If going through an intermediate point (usually near the start of the gesture) affects its meaning, then it is a <strong>path-based gesture</strong>. The user engages a pointer (starting point), carries out a movement that goes through at least one intermediate-point before disengaging the pointer (end point). The intermediate point defines the gesture as requiring a specific path, even if the complete path is not defined.</p>
+      <p>Dragging movements, on the other hand, generally involve "picking up" or "grabbing" an object with a pointer (such as mouse cursor or a finger) and moving it to some other position.</p>
 
-			<figure id="figure-path-based-gesture-2">
-				<img src="img/path-based-gesture-2.png" width="400" alt="Hand showing a starting touch, 1. Moving through a second point, 2. Going to one of several points,3.">
-				<figcaption>A <strong>path-based gesture</strong> involves starting a pointer movement that goes through at least one intermediate point before the end-point. The end-point may be a continuation, or allow for various movements.</figcaption>
+			<figure id="figure-dragging-gesture">
+				<img src="img/2.5.1-dragging-gesture.png" width="400" alt="Illustration of a stylised finger on a hand touching an initial point 1, then moving in a variable and random path, until finally reaching a second point 2.">
+				<figcaption>With a <strong>dragging gesture</strong> only the start- and end-point matter.</figcaption>
 			</figure>
 
-			<p>Examples of path-based gestures include swiping, sliders and carousels dependent on the direction of interaction, and other gestures which trace a prescribed path such as drawing a specific shape. Such paths may be drawn with a finger or stylus on a touchscreen, graphics tablet, or trackpad, or with a mouse, joystick, or similar pointer device.</p>
+			<p>This movement from the start-point (where the object is first picked/grabbed) to end-point (where it it dropped/released) does not require the user to follow any particular path, direction, or speed. Dragging is therefore not a path-based gesture.</p>
 
-     <h3>The difference between Pointer Gestures and Dragging</h3>
-      <p>Dragging is a movement where the user picks up an object with a pointer (such as mouse cursor or a finger) and moves it to some other position. This movement from start point to end point does not require the user to follow any particular path or direction. Dragging is therefore not path-based. In contrast, a path-based pointer gesture requires the traversal of an intermediate point, which is a technical way of expressing that the directionality and possibly speed of the gesture communicates a particular command to the system.
-       <span class="wcag22">Dragging motions are covered in <a href="dragging-movements">Success Criterion 2.5.7: Dragging Movements</a>.</span></p>
+			<p>While horizontal/vertical sliders may initially appear to require strict path-based movement along their track, the vast majority of sliders (either provided natively by user agents, or implemented by the content using scripting) use "<a href="https://www.w3.org/TR/pointerevents/#pointer-capture">pointer capture</a>" – once the user has "grabbed" a slider thumb, they can "drift" from the horizontal or vertical track of the slider while changing the value. Unless the slider is implemented in a way that forces users to precisely follow the path of the track, and straying from the track "loses" the user's grip on the slider thumb, operating a slider is considered a dragging movement, rather than a path-based gesture.</p>
 
-			<figure id="figure-path-based-gesture-3">
-				<img src="img/path-based-gesture-3.png" width="400" alt="Hand showing a starting touch, 1. Going to a second point, 2. It follows a very random path.">
-				<figcaption>A <strong>free-form gesture</strong> does <strong>not</strong> require any particular path before the end-point, only the start and (optionally) the end point matter. This is <strong>not path-based</strong></figcaption>
-			</figure>
+      <p class="wcag22">Dragging motions are covered in <a href="dragging-movements">Success Criterion 2.5.7: Dragging Movements</a>.</p>
 
       <h3>Challenges for people with disabilities</h3>
+
 			<p class="note">Any movement of a pointer could be difficult or impossible to use for someone who cannot perform precise movements, therefore alternative forms of interaction are always recommended. This success criterion is scoped to <em>path-based gestures</em> as it may be difficult or impossible to provide an alternative for <em>free-form gestures</em>.</p>
 
 			<p>Examples of <strong>multipoint</strong> gestures include a two-finger pinch zoom, a split tap where one finger rests on the screen and a second finger taps, or a two- or three-finger tap or swipe. Users may find it difficult or impossible to accomplish these if they type and point with a single finger or stick.</p>
@@ -59,10 +65,12 @@ <h3>Challenges for people with disabilities</h3>
 			<p>This success criterion applies to gestures in the author-provided content, not gestures defined by the operating system, user agent, or assistive technology. Examples of operating system gestures would be swiping down to see system notifications and gestures for built-in assistive technologies (AT). Examples of user agent-implemented gestures would be horizontal swiping implemented by browsers for navigating within the page history, or vertical swiping to scroll page content.</p>
 
 			<p>There are times when a component requires a path-based gesture for touch screen devices but not with a mouse. Taking an example of a generic slider:</p>
+
 			<ul>
 				<li><strong>Using a mouse:</strong> If the user clicks on the thumb control of the slider and moves vertically, the slider will respond by moving to the right or left, even if the movement is mostly upwards. There will be no page scrolling as a result of the vertical movement as long as they drag with focus on the slider. Therefore, the slider does not require a path-based gesture with mouse pointer.</li>
 				<li><strong>Using a touch-screen:</strong> If the user puts their finger on the thumb control of the slider and moves upwards more than sideways, the slider may not respond because the browser takes control of the swipe and interprets it as a scroll, and will move the page up and down. Moving left or right on the slider thumb engages the slider and then the user can vary their vertical movement. This implementation has the 3-point requirement to work with a finger on a touch screen device so is a path-based gesture.</li>
 			</ul>
+
 			<p>As touch screen devices can apply default gestures it is important to test with them if you are unsure whether a particular component does require a path-based gesture.</p>
 
 			<p>Browsers on a touch screen device generally provide some default gestures that impact whether a path-based gesture is needed. For example, a web browser on a touch-screen devices might detect a vertical gesture and scroll the page. If a user places their finger on a slider thumb and moves up (to scroll down) that might not activate the slider (depending on implementation). If the user moves horizontally first then the slider could capture that gesture and ignore vertical movement, resulting in a path-based gesture. If you include touch-screen devices as accessibility supported then these types of interaction need testing with a touch screen as using a mouse in a similar way would not trigger the same browser behavior.</p>
@@ -73,7 +81,9 @@ <h3>Challenges for people with disabilities</h3>
 
 			<p>An exception is made for functionality that is inherently and necessarily based on complex paths or multipoint gestures. For example, entering your signature may be inherently path-based (although acknowledging something or confirming your identity need not be).</p>
 
-			<p>This success criterion <em>does not apply</em> to gestures that involve dragging in any direction because only the start and end points matter in a dragging operation. However, such gestures do require fine motor control. Authors are encouraged to provide non-dragging methods, for instance, a drag and drop operation could also be achieved by selecting an item (with a tap or keyboard interaction) and then selecting its destination as a second step.</p>
+			<p>This success criterion <em>does not apply</em> to gestures that involve dragging in any direction because only the start- and end-points matter in a dragging operation. However, such gestures do require fine motor control. Authors are encouraged to provide non-dragging methods, for instance, a drag and drop operation could also be achieved by selecting an item (with a tap or keyboard interaction) and then selecting its destination as a second step.</p>
+
+			<p>This criterion does not apply to gestures required to control the user agent. For instance, on most browsers on touch screen devices, swiping left on the device's screen triggers the browser's "Back" function. As this is functionality of the browser, rather than of the content, this gesture is not covered by the requirements of this criterion. Similarly, the criterion does not apply to gestures used to operate a screen reader on a touch screen device, such as swiping left or right to move the screen reader's cursor to the previous or next element.</p>
 		</section>
 		<section id="benefits">
 			<h2>Benefits</h2>
@@ -86,12 +96,11 @@ <h2>Benefits</h2>
 		<section id="examples">
 			<h2>Examples</h2>
 			<ul>
-        		<li><p>A website includes a map view that supports the pinch gesture to zoom into the map content. User interface controls offer the operation using plus and minus buttons to zoom in and out.</p></li>
+				<li><p>A website includes a map view that supports the pinch gesture to zoom into the map content. User interface controls offer the operation using plus and minus buttons to zoom in and out.</p></li>
 				<li><p>A website includes a map view that supports the pinch gesture to zoom into the map content. As an single-pointer alternative, the map also allows users to double-tap, hold, and then move the pointer up or down to zoom in or out.</p></li>
-        		<li><p>A news site has a horizontal content slider with hidden news teasers that can moved into the viewport via a fast horizontal swipe/flicking motion. It also offers forward and backward arrow buttons for single-point activation to navigate to adjacent slider content.</p></li>
+        <li><p>A news site has a horizontal content slider with hidden news teasers that can moved into the viewport via a fast horizontal swipe/flicking motion. It also offers forward and backward arrow buttons for single-point activation to navigate to adjacent slider content.</p></li>
 				<li><p>A kanban widget with several vertical areas representing states in a defined process allows the user to right- or left-swipe elements to move them to an adjacent silo. The user can also accomplish this by selecting the element with a single tap or click, and then activating an arrow button to move the selected element.</p></li>
-				<li><p>A custom slider requires movement in a strict left/right direction when operated by dragging the thumb control. Buttons on both sides of the slider increment and decrement the selected value and update the thumb position.</p></li>
-      		</ul>
+      </ul>
 		</section>
 		<section id="resources">
 			<h2>Resources</h2>