Ensuring that drag-and-drop gestures can be cancelled

Technique Category

[Category:General Techniques]

Technique Status Category

[Techniques In Development]

Status

• New technique
• (@@ Notes on work still needed before the technique is ready to publish, such as user agent support notes, etc.)

Applicability

Any technology that supports pointer input (e.g. supporting any or all of the following: mouse pointer, touch on touch screen or trackpad, stylus input, or laser pointer input).

WCAG references

• pointer-cancellation: SC 2.5.2 Pointer Cancellation (sufficient)

User Agent and Assistive Technology Support Notes

On touch screen devices, author-supplied path-based and multipoint gestures usually do not work when OS level assistive technologies (AT) like a built-in screenreader is turned on. AT generally consumes path-based or multipoint gestures so they would not reach the authored content. For example, a horizontal drag gesture may not move a slider thumb as intended by the author, but move the screen reader focus to the next or previous element. Some gestures may work if the user operates "pass through gestures" which are often unreliable as they may depend on factors of hardware, operating system, operating system "skin", operating system setting, or user agent.

Description

The objective of this technique is to ensure that users who use a path-based drag-and-drop gesture to move elements from the initial area to a drop target can abort the action after picking up the target. This can be done either by releasing the target outside a drop area, or by moving the target back to its original position in a separate action that undoes the first action. A third option is a dialog asking for confirmation of the action when the item is dropped.

Note: This technique addresses gestures where support has been implemented by authors, not gestures provided by the user agent (such as horizontal swiping to move through the browser history or vertical swiping to scroll through page content) or the operating system (e.g., gestures to move between open apps, or call up contextual menus of assistive technologies when these are enabled).

Examples

• A site shows a file directory. Files can be picked up and moved over a trash can icon. When the picked-up file is released outside this target, it reverts to the old position.
• A site shows a file directory. Files can be picked up and moved over a trash can icon to delete it. When the picked-up file is released over the trash can, a modal dialog asks the user to confirm or cancel the delete action.
• A kanban implementation of a project planning site shows different columns for phases of an activity. Users can pick up and move icons representing planning items to another column. When an item has been picked up and now follows the pointer, it can be moved outside the drop targets (columns) and dropped there to cancel the action. The item will then jump back to the old position.
• A kanban implementation of an issue tracking system shows columns that indicate different phases in handling issues (such as new / processed / done / closed). There is no screen space outside the kanban columns. Users can pick up and move icons representing issues between columns. When an item has been dropped in another column, the action can be reversed by dragging the icon back to the original column where it will return to its original position (defined by sorting preferences).

Resources

• Video of canceled drag-and-drop interaction (item released outside drop target)

Related Techniques

Provide a list of related techniques. For techniques that are part of the published suite, a technique id (ex. H30) is sufficient. For techniques that exist only in the wiki, link to the wiki page.

Tests

Procedure

1. Determine if any content items are draggable. If this is the case:
2. Check if the drag-and-drop action can be reversed by releasing the picked-up item outside a drop target
3. Check if drag-and-drop action can be reversed by dragging the picked-up item back to its old position.
4. Check if drag-and-drop action can be reversed after releasing the item over the drop target via a dialog or an undo control.

Expected Results

• If #1 is true, at least one option of #2, #3, #4 is true

Test Files

Provide test files here. Currently, techniques do not reference test files, but we may do something with them in the future. Note that working examples (including source code) do not go here, they should be referenced in the examples section.