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

EN 301 549 clauses

The EN 301 549 clause of each criterion, by version of the standard
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 check

Or 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

Write to Validiscan

For a free check, give the address of your shop and its platform.

Validiscan uses what you send to answer you. Privacy notice