• Success Criterion 2.5.1
  • Conformance level A

Slider Operable Only by Dragging, Not by Tapping or Typing

2.5.1 — Pointer Gestures

Scenario

Setting

A weather app's forecast screen

What’s wrong

Slider widgets requiring drag along a track (path-based) with no tap-on-track/stepper/keyboard-visible alternative for pointer users.

Example 

<div class="hour-slider" id="hourTrack">
  <div class="thumb" onpointerdown="startDrag(event)" onpointermove="dragThumb(event)"></div>
</div>
<!-- clicking elsewhere on the track does nothing, and arrow keys aren't wired up -->

Why it matters

Someone who can't perform a smooth, sustained drag can never move past the first hour shown on the forecast.

How to test

Try clicking directly on the slider track (or using a stepper) instead of dragging the thumb: if only path-based dragging works, it fails.

How to fix

A slider needs click-to-jump and arrow-key steps alongside dragging, never drag alone.

hourTrack.addEventListener('click', (e) => {
  const hour = Math.round((e.offsetX / hourTrack.clientWidth) * 23);
  jumpToHour(hour);
});
hourTrack.tabIndex = 0;
hourTrack.addEventListener('keydown', handleArrowKeys);

Outcome

A user clicks the 6pm mark on the track and jumps straight to that hour's forecast.

Who is affected

People with tremor, limited fine motor control, or a mouse-alternative device that can't hold a drag.

Learn more

Related scenarios