Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dragging understanding+tech rewording #1954

Merged
merged 19 commits into from Nov 30, 2021
Merged

Dragging understanding+tech rewording #1954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
98e976c
Update dragging-movements.html
detlevhfischer Jul 12, 2021
1b981c4
Update G219.html
detlevhfischer Jul 12, 2021
794a07f
Update dragging-movements.html
detlevhfischer Jul 12, 2021
21d10d6
Update G219.html
detlevhfischer Jul 12, 2021
ab76c27
Adding radial control example
detlevhfischer Jul 12, 2021
74d338c
minor change of radial control example
detlevhfischer Jul 12, 2021
dcd1bd8
Update dragging-movements.html
detlevhfischer Jul 12, 2021
1f54717
Update dragging-movements.html
detlevhfischer Jul 12, 2021
407ecfa
Separating radial control and slider
detlevhfischer Jul 12, 2021
dd192ce
typo
detlevhfischer Jul 12, 2021
e55ab0b
change position of map example
detlevhfischer Jul 12, 2021
0ab3a81
Remove radial and slider control examples
detlevhfischer Jul 14, 2021
97f83b2
Update dragging-movements.html
detlevhfischer Jul 16, 2021
1179449
Update G219.html
mbgower Jul 27, 2021
54cdb1f
Missing P
alastc Sep 3, 2021
a5846f4
Merge pull request #1975 from w3c/mbgower-patch-2
alastc Sep 3, 2021
416e91e
De-clashing from #1961
alastc Sep 10, 2021
762adcd
Linking up pointer gestures
alastc Nov 29, 2021
c5ee3c4
Merge branch 'main' into dragging-understanding+tech-rewording
alastc Nov 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 9 additions & 6 deletions techniques/general/G219.html
View file
Open in desktop
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Ensuring that a single pointer operable alternative is available for dragging movements that operate on content</title>
<title>Ensuring that a single pointer alternative is available for dragging movements that operate on content</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
</head>
<body>
<h1>Ensuring that a single pointer operable alternative is available for <a>dragging movement</a>s that operate on content</h1>
<h1>Ensuring that a <a>single pointer</a> alternative is available for <a>dragging movement</a>s that operate on content</h1>
<section id="meta">
<h2>Metadata</h2>
<p class="instructions">Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.</p>
Expand All @@ -18,8 +18,10 @@ <h2>Applicability</h2>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this Technique is to ensure that people with motor impairments who cannot carry out <a>dragging movements</a> are presented with a single pointer operable alternative. Some direct manipulation interfaces allow users to pick up targets and move them to another position, for example, to change the position of an item in a priority list in a list, or to change the status of a task in a Kanban implementation (a type of visual process management view which shows tasks in vertical lanes representing process steps such as ‘scheduled’, ‘processed’, ‘completed’).</p>
<p>The single pointer operable alternative may require the user to carry out a series of single pointer interactions (for example, activating a target to be moved; opening a dropdown menu; and selecting a drop destination from the list of menu items offered).</p>
<p>The objective of this Technique is to ensure that people with motor impairments who cannot carry out <a>dragging movements</a> are presented with an alternative <a>single pointer</a> interaction.</p>
<p>Some direct manipulation interfaces allow users to pick up targets and use dragging movements to move them to another position, for example, to change the position of an item in a priority list, or to move a task on a Kanban or planning board.</p>
<p>Such dragging movements are difficult or impossible to carry out for some users with motor disabilities. The alternative to dragging movements operates the underlying function by one or several <a>single pointer</a> activations. A single tap or click may reveal controls (arrows) to move a target in a stepwise fashion; open a drop-down menu where the drop position can be selected; or allow moving it to an ajacent postion by a swipe gesture.</p>


</section>
<section id="examples">
Expand All @@ -28,8 +30,9 @@ <h2>Examples</h2>
<ul>
<li>A list of items can be re-ordered by picking up an item and dragging it upwards or downwards. Other elements move dynamically to open a gap where the picked-up target can be dropped. After a single pointer activation, the list items display up and down arrows which allow a step-wise re-ordering of the the list via a <a>single pointer</a> inputs (taps or clicks at the up or down arrow).</li>
<li>A vertical priority list indicates the priority of items listed. Each item can be ‘picked up’ with a pointer and dragged up or down to another position. The other list items rearrange dynamically. To the left of each list item, a number in a text field shows the current priority position. For any of the items, users can put in another number. This leads to a dynamic reordering and renumbering of the priority list.</li>
<li>In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks (for example, to change the status of a task from “in process” to “completed”). One or several items in a lande can be selected by a single tap or click. A single pointer activation of a drop-down menu labelled “Move selected items to” offers a selection of drop targets (other lanes). A further single pointer activation over the desired menu item moves targets to the specified lane.</li>
<li>In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks (for example, to change the status of a task from “in process” to “completed”). One or several items in a lane can be selected by a single tap or click. A single pointer activation of a drop-down menu labelled “Move selected items to” offers a selection of drop targets (other lanes). A further single pointer activation over the desired menu item moves targets to the specified lane.</li>
<li>In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks. A directional horizontal swipe over an item moves it to the adjacent lane. This process can be repeated until the item is in the desired lane.</li>
<li>In a radial control widget, the visual indicator of the current value of the control can be dragged to a different position. Users can also click or tap on another position of the radial control to change the value.</li>
</ul>

</section>
Expand All @@ -41,7 +44,7 @@ <h3>Procedure</h3>
<p>For interface elements that support dragging:</p>
<ol>
<li>Check the interface for the presence of functions triggered by <a>dragging movement</a>s.</li>
<li>Check that there is a <a>single pointer</a> input alternative to operate the same function</li>
<li>Check that there is a <a>single pointer</a> activation alternative to operate the same function</li>
</ol>
</section>
<section class="test-results">
Expand Down
17 changes: 6 additions & 11 deletions understanding/22/dragging-movements.html
View file
Open in desktop
Expand Up @@ -39,20 +39,16 @@ <h2>Intent of Dragging Movements</h2>

<p>Success Criteria 2.1.1 Keyboard and 2.1.3 Keyboard (No Exception) require dragging features to be keyboard accessible; however, it is possible to create an interface that works with dragging and keyboard controls that does not work using only clicks or taps.</p>

<p>This Success Criterion applies to dragging motions as opposed to pointer gestures, which are covered in Success Criterion 2.5.1 Pointer Gestures. Pointer gestures include directional path-based as well as multi-point gestures. In contrast, for dragging motions, only the start and end point of the motion matters, not the actual path.</p>
<p>This Success Criterion applies to dragging movements as opposed to pointer gestures, which are covered in <a>Success Criterion 2.5.1 Pointer Gestures</a>. Pointer gestures include directional path-based as well as multi-point gestures. In contrast, for dragging movements, only the start and end point of the movement matters, not the actual path.</p>

<p>There may be cases where a dragging movement is essential, for example, drawing a freeform figure, or playing a game where the aim is to follow a particular track as accurately as possible. The criterion has an exception for these cases where the task requires dragging.</p>
<p>There may be cases where a dragging movement is essential, for example, drawing a freeform figure, or playing a game where the aim is to follow a particular track as accurately as possible. The criterion has an exception for these cases.</p>

<p>Some tasks may typically involve dragging, such as sorting items in a list, but as there are other ways to achieve that task they are not considered essential.</p>

<h3>Distinguishing dragging movements from path-based pointer gestures</h3>

<p>Dragging movements covered in this Success Criterion are pointer interactions where only the endpoints matter. Once the pointer engages with a target, the direction of the dragging motion does not factor into the interaction until the pointer disengages the target. Since the dragging movement does not have an intermediate point, the dragging motion can go in any direction.</p>

<p>Path-based gestures covered in Success Criterion 2.5.1 Pointer Gestures are pointer interactions that involve at least an initial directionality. The pointer motion must include at least one intermediate point to qualify as a path-based gesture. The intermediate point defines the motion as a gesture by requiring a specific path, even when the entire path to complete the interaction is not predefined. While a user may use dragging movements to perform the interaction, path-based gestures requires following a path to an intermediate point. For more details, refer to <a href="pointer-gestures.html">Understanding Success Criterion 2.5.1 Pointer Gestures</a>.</p>
<p>Dragging movements covered in this Success Criterion are pointer interactions where only the endpoints matter. Once the pointer engages with a target, the direction of the dragging motion does not factor into the interaction until the pointer disengages the target. Since the dragging movement does not have an intermediate point, the dragging motion can go in any direction. Path-based gestures covered in Success Criterion 2.5.1 Pointer Gestures. For more details, refer to <a href="https://www.w3.org/WAI/WCAG21/Understanding/pointer-gestures.html">Understanding Success Criterion 2.5.1 Pointer Gestures</a></p>




</section>
<section id="benefits">
Expand All @@ -65,13 +61,12 @@ <h2>Benefits of Dragging Movements</h2>
</section>

<section id="examples">
<h2>Examples of Dragging Movements</h2>
<h2>Examples of Dragging Movements with alternatives</h2>

<ul>
<li>A sortable list of elements may, after focussing a list element, provide adjacent controls for moving the element up or down in the list by simply tapping/clicking on those controls.</li>
<li>In a sortable list, when a list item is activated by tapping or focusing, adjacent arrows pointing up and down are shown. Users can move the selected list item up or down the list simply by tapping or clicking on those arrows.</li>
<li>A kanban implementation may provide an additional pop-up menu for focused elements that can be activated by simple clicks/taps providing an option for moving the selected element to another kanban silo.</li>
<li>A radial control widget where the value can be set by dragging includes a text field that presents the current value and offers the input of the desired value via a keyboard (including on-screen virtual keyboards).</li>
<li>A map allows users to drag the view of the map around, and the map has up/down/left/right buttons to move the view as well.</li>
<li>A map allows users to drag the view of the map around. The map also shows up/down/left/right buttons to move the view in a stepwise fashion.</li>
</ul>

</section>
Expand Down