- Success Criterion 2.5.7
- Conformance level AA
Range Slider Adjustable Only by Dragging Its Handle
2.5.7 — Dragging Movements
Scenario
Setting
A streaming music app's search results
What’s wrong
Range sliders adjustable only by dragging the thumb (no click-on-track increment, no visible steppers).
Example
<div draggable="true" class="reorder-handle"></div> <!-- drag-only reordering --> Why it matters
People with limited dexterity and switch, eye-gaze, or voice users who cannot drag.
How to test
Try adjusting a range slider by clicking directly on the track or using visible stepper buttons instead of dragging the thumb: if neither works, it fails.
How to fix
A single-pointer, non-dragging alternative (buttons, menu option, tap) must exist for the drag operation.
<div draggable="true" class="reorder-handle"></div><button aria-label="Move item up">↑</button><button aria-label="Move item down">↓</button>Any drag-to-reorder or drag-to-move interaction needs a single-pointer alternative like up/down buttons.
Outcome
On a streaming music app's search results, this barrier is gone for people with limited dexterity and switch — they get the same result as anyone else here.
Who is affected
People with limited dexterity and switch, eye-gaze, or voice users who cannot drag.
Learn more
- Understanding Understanding document (opens in a new tab)