- 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
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Feature Requiring a Swipe Gesture With No Tap Alternative
- Swipe-Only Carousel With No Next or Previous Button
- Map or Image Zoomable Only by Pinch Gesture
- Two-Finger Gesture Required With No Single-Pointer Option
- Pull-to-Refresh as the Only Way to Refresh Content
- Swipe-to-Delete Action With No Tap-Based Alternative