Dragging Movements

Overview

All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.

Understanding

The W3C Web Accessibility Initiative (WAI) provides detailed guidance on understanding and implementing this criterion. The Understanding document covers the intent, benefits, and supporting techniques in depth.

Techniques

W3C provides documented techniques for meeting this criterion. Each technique links to the full specification with code examples and test procedures.

• G219

How to Test

1. 1

   Identify all drag-and-drop interactions on the page (sortable lists, draggable panels, sliders, resize handles).

2. 2

   Verify each has a non-drag alternative: click buttons, keyboard arrow keys, or a context-menu action.

3. 3

   Test the alternative using only single pointer clicks (no dragging) — confirm the full functionality is achievable.

4. 4

   Exception: drag-only features where dragging is determined by the user agent (native browser scrollbar) are exempt.

Failing & Passing Examples

<!-- Sortable list: items can only be reordered by drag and drop;
     no keyboard or click-based alternative provided -->
<ul id="sortable">
  <li draggable="true">Item 1</li>
  <li draggable="true">Item 2</li>
</ul>

<!-- Drag still works, but move-up/move-down buttons provide
     a single-pointer alternative (technique G219) -->
<ul id="sortable">
  <li>
    Item 1
    <button onclick="moveUp(0)" aria-label="Move Item 1 up">↑</button>
    <button onclick="moveDown(0)" aria-label="Move Item 1 down">↓</button>
  </li>
</ul>