Drag-only controls need a single-pointer alternative
Dragging means holding a pointer down while moving it precisely, which is hard or impossible for people with tremors or limited hand control, and for anyone using a head pointer or voice control. When the price filter only works by dragging, they cannot narrow the range at all.
- Rule id
- vs-dragging
- Source
- Validiscan check
- Impact
- Serious
- Fix tier
- MANUAL
- on Shopify, Shopware, WooCommerce and Magento
- Status
- runs
What the check does
Detects controls that can only be operated by dragging, such as price range sliders, image zoom and sortable lists, without a single tap or click alternative (2.5.7).
The check looks for custom slider handles: [role="slider"], the handle classes of noUiSlider, jQuery UI and Ion.RangeSlider, and class names such as price-handle. It skips input[type="range"], handles that are hidden, under 4 px or aria-disabled="true", and class-matched elements over 80 px or containing an image. At most six per page are checked.
A handle outside the tab order is a finding. A focusable one gets an arrow key along its axis, then, if nothing changed, one across it. If neither changes aria-valuenow, aria-valuetext, its text or position on the track, it is a finding. A key press that navigates away is undone by a reload; that slider and later focusable ones go to needs review.
Zoom widgets at least 80 by 80 px with draggable="true" or touch-action: none and no zoom control nearby go to needs review too. The scanner does not turn needs review into findings today. Only keys are pressed, so the check does not test whether a tap or click alone sets a value.
How to fix it
Offer a single-pointer alternative next to every drag interaction: number fields for the minimum and maximum price, plus and minus buttons for zoom, and move up and move down buttons for sortable lists.
WCAG success criteria
- 2.5.7 Dragging Movements, level AA
EN 301 549 clauses
| WCAG criterion | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.5.7 | not a clause in this version | 9.2.5.7 |
Start with a free check of your shop.
Send your shop’s address. Validiscan scans it and replies with every failure the scan can prove, with the page and the code.
Request a free checkOr write to info@validiscan.com.
What the free check covers, and what it leaves out- You send
- your shop’s address
- Pages scanned
- up to 15
- You get
- every failure the scan can prove, with the page and the code
- On your shop
- public pages only; no login, nothing bought, no forms sent
- What it is not
- a full audit