WCAG 2.5.7 Dragging Movements: Provide Alternatives to Drag

What This Criterion Requires

WCAG 2.5.7 Dragging Movements is a new criterion introduced in WCAG 2.2. It requires that 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 rather than the author. Dragging movements are pointer interactions where the user presses and holds, then moves the pointer to a new position before releasing. Common drag interactions include reordering items in a list, moving items between containers, resizing panels, adjusting sliders, moving objects on a canvas, and drag-and-drop file uploads. For each of these interactions, an alternative single-pointer method must be available, such as buttons to move items up and down in a list, click-to-select and click-to-place interactions, input fields for precise values, or tap-based controls for adjustment. This criterion ensures that users who cannot perform dragging motions can still access all functionality.

Why It Matters

Dragging movements require a level of fine motor control that many users do not possess. People with motor impairments, tremors, or paralysis may be unable to press and hold a pointer device while simultaneously moving it to a new position. Users of assistive technology such as head pointers, eye-tracking systems, or switch-based input devices typically cannot perform drag operations at all. Older adults with declining motor control may find dragging movements difficult or impossible. Users on touch devices may struggle with drag gestures, especially on small screens. Additionally, voice control users cannot easily replicate drag-and-drop movements through voice commands. When drag-and-drop is the only way to perform a function, such as reordering a to-do list or adjusting a price range slider, users who cannot drag are completely locked out of that functionality. Providing a simple alternative like arrow buttons, direct text input, or a click-based selection mechanism ensures equal access for all users.

Common Failures and How to Fix Them

<ul class="sortable-list" data-sortable>
  <li draggable="true">Task 1</li>
  <li draggable="true">Task 2</li>
  <li draggable="true">Task 3</li>
</ul>
<script>
  // Only drag-and-drop reordering, no alternative
  initDragAndDrop('.sortable-list');
</script>

<ul class="sortable-list">
  <li>
    <span>Task 1</span>
    <button aria-label="Move Task 1 up" onclick="moveUp(this)">Up</button>
    <button aria-label="Move Task 1 down" onclick="moveDown(this)">Down</button>
  </li>
  <li>
    <span>Task 2</span>
    <button aria-label="Move Task 2 up" onclick="moveUp(this)">Up</button>
    <button aria-label="Move Task 2 down" onclick="moveDown(this)">Down</button>
  </li>
  <li>
    <span>Task 3</span>
    <button aria-label="Move Task 3 up" onclick="moveUp(this)">Up</button>
    <button aria-label="Move Task 3 down" onclick="moveDown(this)">Down</button>
  </li>
</ul>

<div class="price-slider">
  <div class="slider-track">
    <div class="slider-thumb" draggable="true"></div>
  </div>
  <span>Price: $<span id="price-value">50</span></span>
</div>

<div class="price-filter">
  <label for="price-range">Price range</label>
  <input type="range" id="price-range" min="0" max="200" 
    value="50" step="5" aria-valuetext="$50">
  <label for="price-input">Or enter exact price: $</label>
  <input type="number" id="price-input" min="0" max="200" 
    value="50" step="5">
</div>

How to Test

1. Identify all interactions on the page that involve dragging, such as sortable lists, sliders, drag-and-drop file upload areas, and resizable panels.
2. For each drag interaction, verify that an alternative single-pointer method exists (buttons, click targets, form inputs) that achieves the same result.
3. Test the alternative methods to confirm they are fully functional and produce the same outcome as the drag interaction.
4. Verify that the alternative methods are accessible to keyboard users and screen reader users.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist
• Wix Accessibility Checklist
• Webflow Accessibility Checklist

Further Reading

• Wcag Explained Plain English
• Keyboard Navigation Testing
• Accessible Forms Guide

Related WCAG Criteria

• WCAG 2.5.1
• WCAG 2.1.1