Ensuring that drag-and-drop actions can be cancelled

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

The Technique is applicable to 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).

This technique relates to Success Criterion 2.5.2: Pointer Cancellation (Sufficient).

Description

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

Note

This technique addresses pointer actions 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).

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.

Examples

Resources

Resources are for information purposes only, no endorsement implied.

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

Tests

Procedure

For content that is draggable, check whether the drag-and-drop action can be reversed by:

  1. releasing the picked-up item outside a drop target
  2. dragging the picked-up item back to its old position
  3. a confirmation dialog or an undo control appears after the item has been dropped

Expected Results

  • At least one option of #1, #2, #3 is true