Agent Wranglers

Accessibility Required

Make every gesture work with one tap

Make every action that needs a multi-finger or path gesture also work with single taps. Act on release, not on press. These are WCAG criteria 2.5.1 and 2.5.2 (A).

How to do it

Pair pinch zoom and swipe with buttons, such as plus and minus or next and previous. Run actions on click or pointerup, never pointerdown, so people can slide off to cancel. Any action triggered by shaking or tilting the device needs a button too, as 2.5.4 (A) asks.

Example

<div class="map" aria-label="Map of the shop">…</div>
<button type="button" aria-label="Zoom in">+</button>
<button type="button" aria-label="Zoom out">−</button>

How to check

A search of the scripts finds no pointerdown, mousedown or touchstart handler that completes an action. Each gesture feature has a test that completes it with clicks.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/pointer-gestures.