Dragging Movements WCAG 2.5.7: Accessible Alternatives for Sliders, Kanban & Sorting
Learn how to satisfy WCAG 2.2 SC 2.5.7 Dragging Movements. Build accessible single-pointer and keyboard alternatives for complex drag-and-drop interfaces.
Drag-and-drop interactions (such as dragging Kanban cards, adjusting dual-handled price sliders, or reordering list items) require precise motor coordination and continuous pressure. Under WCAG 2.2 Success Criterion 2.5.7 (Dragging Movements - Level AA), any functionality that relies on a dragging movement must provide a single-pointer alternative that operates via simple clicks or taps.
A dragging movement occurs when the pointer engages an element on down-press, moves across the viewport while maintaining contact, and releases. Users with tremors, eye-tracking inputs, head pointers, or touchscreens frequently lose contact mid-drag.
Understanding Success Criterion 2.5.7 Dragging Movements
WCAG 2.5.7 does not ban drag-and-drop interactions; it requires that dragging is not the exclusive method of performing an action. An accessible alternative using simple taps or clicks must be available.
Common Problematic UI Patterns
| UI Pattern | Dragging Mechanism | Accessible Single-Pointer Alternative |
|---|---|---|
| Reorderable List / Kanban | Drag item to new position in column. | Up / Down buttons, or dropdown to select target column and position. |
| Price Range Slider | Drag left/right slider thumbs. | Clickable numeric input fields or increment/decrement buttons. |
| Canvas / Whiteboard Pan | Click and drag to pan viewport. | Directional pan buttons (North, South, East, West) or zoom controls. |
Single-Pointer Alternative Strategies
Implementing accessible alternatives improves usability for all visitors:
- Explicit Action Buttons: Add visible "Move Up" / "Move Down" icon buttons next to each list row.
- Select Dropdowns: Provide a "Move to..." menu allowing users to choose the destination column or ordinal position.
- Direct Numeric Input: Pair every graphical slider with an accessible
<input type="number">field.
Accessible Reordering Implementation in Vanilla JS
<!-- Accessible Reorderable Item -->
<li class="reorder-item" draggable="true">
<span class="item-title">Priority Task #1</span>
<div class="accessible-controls">
<button type="button" class="btn-move-up" aria-label="Move Priority Task 1 up">↑</button>
<button type="button" class="btn-move-down" aria-label="Move Priority Task 1 down">↓</button>
</div>
</li>Testing Dragging Accessibility
- Pointer Single-Click Test: Attempt to complete all workflow actions using only single left-clicks on a trackpad or mouse without holding the button down.
- Touchscreen Tap Test: Verify that mobile users can reorder items or adjust sliders with simple taps.
- Keyboard Operation: Confirm that list items can be reordered using keyboard arrow keys and Space/Enter.
Audit Your Website for WCAG 2.2 Compliance Today
Scan your domain in 60 seconds with Rogabot and get instant PR-ready code diffs to prevent ADA lawsuit exposure.