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 buttonsswipe should have next and previous buttonsdo this without two fingerstap instead of tracing a pathI can only use one fingerthe map only works if you pinchcarousel that you can only swipepointer 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