Dragging motions are also achievable with single pointers

New in WCAG 2.2

Applicable Role(s): Designer, Developer

Overview

Content that requires a dragging motion can make a task harder to complete for someone that experiences difficulty holding down a pointer device without letting go. This could mean holding down a mouse click, touch press, or other pointing device while moving it to another location. Dragging may also be challenging for someone who navigates by keyboard only, or uses different input methods like speech input or eye/head gaze pointers.

Best Practices and Tips

Provide a single pointer control alternative

Depending on the purpose of dragging, the single pointer control could be an element like a button, input, or link that performs the same action as the dragging operation.

Criterion Note

This criterion differs from the pointer gestures criterion. In a dragging movement, only the start and end points matter, so dragging isn't a path-based gesture. A path-based gesture requires a pointer to match a specific path (like a signature form field, where someone uses a pointer to sign their name).

Examples/Patterns

Colour Contrast Analyser

A color can be chosen by dragging RGB color values on a slider. The slider allows the user to also click on any value in the slider using a pointer (option one) or enter values in a text input (option two).

A mouse cursor is set on an RGB slider ready to choose a value, next to a set text inputs

Trello Kanban Cards

Cards can be dragged to move them between different columns on a kanban board. There is also a "Move" button with options to choose a column and what position in the column the card should go to.

In a card dialog, a move popup appears with options for boards, columns, and column position