Operable · Level A · 2.5.1
Pointer Gestures
Anything operated by a pinch, a two-finger rotate, a swipe-to-dismiss, or any other multi-touch or path-based gesture needs a single-pointer alternative — a button, a tap — that accomplishes the same thing. This covers touchscreen users who can't reliably trace a precise path or hold multiple fingers down at once, and anyone using an alternative pointer device (a head pointer, an eye-gaze system) that only ever produces one point of contact to begin with.
- Motor
- Cognitive
How to recognize it
Try to operate every gesture-based interaction using only single taps, with no swiping, pinching, or multi-finger input. A photo viewer that only zooms via pinch, with no visible +/− buttons anywhere, fails. A map that only pans with two fingers — a common pattern used to distinguish map-panning from page-scrolling — with no alternative controls, fails. A list where the only way to dismiss or archive an item is swiping it away, with no visible button doing the same thing, fails. The genuine exception is narrow: a gesture is exempt only when the path or multi-touch itself is inherently what's being captured, the standard example being an actual signature field. Even something that feels gesture-native, like drawing a pattern to confirm an action, can usually be replaced by a single-pointer alternative (a PIN, a tap-to-confirm button) without losing what it's actually verifying.
How to fix it
Add a single-pointer equivalent alongside every gesture: zoom buttons next to pinch-to-zoom, an explicit 'Archive' button next to swipe-to-archive, standard single-finger drag or +/− controls alongside two-finger pan. This is the same underlying fix as 2.5.7's approach to dragging — give people a tap/click-based route to the same outcome — just applied to gestures that involve a path or multiple touch points rather than a simple drag.
Example
Avoid
<div class="photo-viewer" ongesturechange="handlePinchZoom(event)"></div><li class="card" ontouchmove="handleSwipe(event)">Item</li><div class="map" data-pan="two-finger-only"></div>Prefer
<div class="photo-viewer" ongesturechange="handlePinchZoom(event)">
<button aria-label="Zoom in">+</button>
<button aria-label="Zoom out">−</button>
</div><li class="card" ontouchmove="handleSwipe(event)">
Item <button aria-label="Archive item">Archive</button>
</li><div class="map">
<button aria-label="Zoom in">+</button>
<button aria-label="Zoom out">−</button>
</div>
<!-- single-finger drag still pans, standard touch behavior -->