2.5.7Dragging Movements

Why are dragging alternatives needed?

Dragging a slider thumb, reordering a list, moving a pane boundary —"press-and-move" operations (dragging) are difficult or impossible for the following people:

• People with hand tremors (essential tremor, Parkinson's disease, etc.): They cannot maintain pressure while moving precisely. Single-tap or single-click button operations are manageable.
• People with unstable mouse control or difficulty with trackpads: The pointer may slip off during a drag, causing the operation to fail midway.
• People using switch devices (operating a PC with 1-2 switches): Drag operations are simply not possible.

WCAG 2.5.7 requires that all operations achievable by dragging also have a non-drag alternative (a single click/tap, or dedicated buttons).

Failing Example (Drag-only)

The slider below changes its value only by dragging the thumb. There are no +/− buttons and no track-click functionality. People with hand tremors or switch device users cannot set the value accurately.

<!-- ❌ Drag-only: no alternative provided -->
<span class="sv-bad-label">Volume</span>
<div class="sv-bad-track">
  <!-- No tabindex or role → can't be focused via keyboard -->
  <div class="sv-bad-thumb" id="bad-knob"></div>
</div>
<!-- No +/− buttons, no track click support -->

Passing Example (Button, Click, and Keyboard Alternatives)

The slider below can be operated in 4 different ways. Users who have difficulty dragging can choose the method that works best for them.

Keyboard Operation

Implementation (Code)

Markup:

<!-- Drag + click + buttons + keyboard alternatives -->
<div class="sv-wrap">
  <div class="sv-header">
    <span id="d257-vol-label">Volume</span>
    <span id="d257-vol-out" class="sv-val">40</span>
  </div>
  <div class="sv-row">
    <button type="button" class="sv-btn" id="d257-minus"
            aria-label="Decrease volume">−</button>

    <div class="sv-track" id="d257-track">
      <div class="sv-fill" id="d257-fill" style="width:40%"></div>
      <div role="slider"
           tabindex="0"
           id="d257-thumb"
           class="sv-thumb"
           aria-labelledby="d257-vol-label"
           aria-valuemin="0"
           aria-valuemax="100"
           aria-valuenow="40"
           style="left:40%"></div>
    </div>

    <button type="button" class="sv-btn" id="d257-plus"
            aria-label="Increase volume">+</button>
  </div>
</div>

Script:

const track = document.getElementById('d257-track');
const thumb = document.getElementById('d257-thumb');
const fill  = document.getElementById('d257-fill');
const out   = document.getElementById('d257-vol-out');
const minus = document.getElementById('d257-minus');
const plus  = document.getElementById('d257-plus');

const MIN = 0, MAX = 100, STEP = 1, BIG = 10;

function getValue() {
  return Number(thumb.getAttribute('aria-valuenow'));
}
function setValue(next) {
  const v = Math.min(MAX, Math.max(MIN, Math.round(next)));
  const pct = ((v - MIN) / (MAX - MIN)) * 100;
  // Screen reader feedback: always update on each operation
  thumb.setAttribute('aria-valuenow', String(v));
  thumb.style.left = pct + '%';
  fill.style.width  = pct + '%';
  out.textContent   = String(v);
}

/* ① Drag — Pointer Events + setPointerCapture */
// setPointerCapture keeps tracking even if the finger leaves the element on touch/stylus
thumb.addEventListener('pointerdown', (e) => {
  e.preventDefault();
  thumb.setPointerCapture(e.pointerId);
});
thumb.addEventListener('pointermove', (e) => {
  if (!thumb.hasPointerCapture(e.pointerId)) return;
  const { left, width } = track.getBoundingClientRect();
  setValue(((e.clientX - left) / width) * MAX);
});

/* ② Track click to move (2.5.7 alternative) */
track.addEventListener('click', (e) => {
  if (e.target === thumb) return; // Ignore clicks on the thumb itself
  const { left, width } = track.getBoundingClientRect();
  setValue(((e.clientX - left) / width) * MAX);
  thumb.focus(); // Move focus to the thumb
});

/* ③ +/− buttons (2.5.7 alternative) */
minus.addEventListener('click', () => setValue(getValue() - STEP));
plus.addEventListener('click',  () => setValue(getValue() + STEP));

/* ④ Keyboard (APG role="slider" compliant) */
thumb.addEventListener('keydown', (e) => {
  const v = getValue();
  const map = {
    ArrowRight: v + STEP, ArrowUp:   v + STEP,
    ArrowLeft:  v - STEP, ArrowDown: v - STEP,
    PageUp:     v + BIG,  PageDown:  v - BIG,
    Home: MIN,  End: MAX,
  };
  if (!(e.key in map)) return;
  e.preventDefault();
  setValue(map[e.key]);
});

setValue(40); // Initialize and sync UI with aria

Checklist

• Operations achievable by dragging have button or click alternatives
• Alternatives use a single pointer action (click/tap) without dragging
• Alternatives achieve the same result as dragging (precision and range)
• The slider thumb has role="slider" and tabindex="0"
• aria-valuemin / aria-valuemax / aria-valuenow are correctly set
• aria-valuenow is updated every time the value changes
• Keyboard ← → Home End work (also satisfies 2.1.1)
• The thumb has touch-action: none to prevent conflicts with scrolling
• Focus rings are not removed (outline: none not used)
• Pointer capture is maintained even if the finger leaves the element during drag (setPointerCapture)
• Operations where the drag path itself is essential (e.g., freehand drawing) are understood as exceptions