• Success Criterion 2.1.1
  • Conformance level A

Slider or Carousel Operable Only by Swipe or Mouse Drag

2.1.1 — Keyboard

Scenario

Setting

A fashion e-commerce site's checkout page

What’s wrong

Sliders/carousels operable only by swipe or mouse-drag.

Example 

const handle = document.querySelector('.delivery-slider-handle');
handle.addEventListener('mousedown', startDrag);
handle.addEventListener('touchstart', startDrag);
// dragging moves the handle and updates the delivery date; no other input method exists

Why it matters

A shopper using only a keyboard cannot drag the handle to pick an earlier delivery date, so they are stuck with the default date.

How to test

Tab to a slider/carousel and try arrow keys: if it only responds to swipe or mouse-drag, it fails.

How to fix

Give any custom slider role="slider" plus arrow-key handling and aria-valuenow, matching native input type="range" behavior.

handle.setAttribute('tabindex', '0');
handle.setAttribute('role', 'slider');
handle.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight') increaseDate();
  if (e.key === 'ArrowLeft') decreaseDate();
});

Outcome

A shopper tabs to the delivery slider and uses the arrow keys to pick an earlier date.

Who is affected

Keyboard-only users and switch users cannot adjust a control that only understands a drag gesture.

Learn more

Related scenarios