Alternatives to Dragging
Dragging is a common interaction on modern websites. Think about reordering items, moving cards on a kanban board, adjusting sliders, navigating maps, and more.
But for many users, drag gestures are difficult or impossible to perform, especially those with:
- Reduced fine motor control
- Tremors or muscle fatigue
- Mobility impairments
- Pointer precision challenges
- Touchscreen use with assistive tech (e.g., switch devices)
To support everyone, WCAG 2.5.7 requires that any action that depends on dragging must have an alternative input method — such as taps, buttons, menus, or keyboard controls.
In short:
If dragging performs an action, you must also allow users to perform that action without dragging.
Good Practice
Provide a keyboard-friendly, click-friendly version of the interaction:
Reordering items
Instead of only drag-and-drop, offer:
- 🔼 Move up
- 🔽 Move down
- A numbered position menu
- A “Move to top/bottom” option
<button aria-label="Move item up">🔼</button>
<button aria-label="Move item down">🔽</button>
Sliders & range inputs
Many sliders require fine pointer movements. Provide:
- ”+” and ”–” buttons
- Text input for precise values
- Arrow key support
<input type="range" ... />
<button aria-label="Decrease value">−</button>
<button aria-label="Increase value">+</button>
Kanban boards / sortable lists
Dragging cards between columns should also allow:
- A dropdown like “Move to: To Do / In Progress / Done”
- Keyboard shortcuts (with instructions!)
- Move buttons beside each item
Carousels Carousels often use swipe
Carousels often use swipe or drag interactions. Provide:
- Previous / Next buttons
- Keyboard arrow key support
- A list of slide indicators (buttons)
Even if the carousel supports dragging, these buttons serve as the non-drag alternative.
Maps & large canvases
Dragging is used to pan, but users may struggle with that. Add:
- Directional buttons (⬆️⬇️⬅️➡️)
- Zoom in/out controls
- Reset view / center on location
Watch Out For
- Drag-only reordering
- Sliders with no button or numeric alternative
- “Swipe-only” interactions (carousels, galleries)
- Maps or drawings that cannot be navigated without dragging
- Keyboard traps inside draggable components
Many libraries include drag support by default but do not include keyboard alternatives — you must add them intentionally.
Pro Tip
Make sure alternatives are:
- Visible (not hidden until drag starts)
- Keyboard reachable
- Screen-reader accessible
- Clearly labelled with aria-label, aria-describedby, or visible text
A good pattern is to announce the new position when reordering via keyboard:
<p id="item-3-position">Item moved to position 3.</p>
Screen readers will then confirm the action.
Do this today: Review any drag interactions on your site — sortable lists, sliders, carousels, or maps. Can every drag-based action also be performed with buttons, menus, or keyboard input? If not, add a non-drag alternative.