Pointer gestures

Pinches, swipes, and traced shapes need a simple one-pointer option, such as zoom buttons or Previous and Next controls.

“pinch zoom needs buttons”“swipe should have next and previous buttons”“do this without two fingers”“tap instead of tracing a path”“I can only use one finger”“the map only works if you pinch”“carousel that you can only swipe”“pointer gesters”

See it

Live demo coming soon

What it is

Pointer gestures are interactions whose result depends on multiple contact points or on the path the pointer traces. Pinch-to-zoom is multipoint; swiping through a carousel or drawing a shape is path-based. WCAG SC 2.5.1 Pointer Gestures requires the same function to work with a single pointer and no path-based gesture unless that gesture is essential.

Add zoom buttons beside a pinchable map, Previous and Next buttons beside a swipeable carousel, and a tap-based destination picker beside a route drawn across a screen. Keep the gesture as a shortcut for people who like it, but make the simpler controls visible and large enough to operate accurately.

Do not confuse a path gesture with every pointer movement. In a drag, only the start and end positions may matter; in a swipe or traced shape, the route, direction, or speed matters too. Handwriting and freehand drawing can be essential, but a carousel swipe is not essential when buttons can produce the same result.

Ask AI for it

Preserve the existing pinch, swipe, or traced gesture as an enhancement, then expose every nonessential result through simple single-pointer controls. Add native Zoom in and Zoom out buttons for pinch zoom, and Previous and Next buttons for swipe navigation. Give each control a visible label, at least a 24 by 24 CSS pixel target, and the same state updates as the Pointer Events API gesture handler. Do not set touch-action: none on the page or block browser zoom. Test each action with one tap, a mouse click, keyboard activation, and a touch pointer, and document any gesture kept as essential because its traced path itself is the input, such as handwriting.

You might have meant

dragging alternativeinput modality supporttarget sizekeyboard navigationswitch access

Go deeper