• Success Criterion 2.5.1
  • Conformance level A

Custom Scroll Area Operable Only by a Flick Gesture

2.5.1 — Pointer Gestures

Scenario

Setting

An online marketplace's seller dashboard

What’s wrong

Custom scroll areas operable only via flick gestures.

Example 

chartPanel.addEventListener('touchend', (e) => {
  applyMomentum(velocity); // a flick is the only way to move the panel
});
chartPanel.style.overflow = 'hidden'; // hides the scrollbar and blocks click-drag too

Why it matters

A seller checking last month's earnings can't get past the first few days without a well-timed flick the panel recognizes.

How to test

Try scrolling a custom scroll area with a scrollbar, buttons, or keyboard instead of flicking: if flick gesture is the only way to scroll it, it fails.

How to fix

Let the browser's native scroll handle single-pointer dragging, then add step buttons besides.

.chart-panel { overflow-x: auto; }
<button aria-label="Scroll earnings chart left" onclick="scrollChart(-200)">‹</button>
<button aria-label="Scroll earnings chart right" onclick="scrollChart(200)">›</button>

Outcome

A seller clicks the right arrow repeatedly and steps through the whole month's data.

Who is affected

People with reduced grip strength and users of adapted pointing devices that can't produce a fast flick.

Learn more

Related scenarios