Operable · 2.5 Input Modalities

Pointer Gestures WCAG 2.5.1 · Level A

Anything operated by a multipoint or path-based gesture, such as a pinch, a two-finger tap or a swipe, must also be operable with a single pointer without a path-based gesture, such as a tap or click, unless the gesture is essential. Gestures for operating the browser or assistive technology are exempt.

Level
A
Since
WCAG 2.1
Principle
Operable
Guideline
2.5 Input Modalities
Try the live demo All criteria Checklist

Live demo

Zoom the map without pinching

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Try to zoom in on the map with one finger or a single mouse click, so you can read the shop names. Then switch to Fails and try again.

Live example

Passes

Find a shop near you

Zoom in on the map to read the shop names.

Bakery Bookstore Pharmacy

What happened

    Why it passes

    The Zoom in and Zoom out buttons work with one tap or click, so someone using one finger, a head pointer or a mouth stick can read the shop names. Pinching still works for people who like it.

    Why it fails

    The map zooms only with a two-finger pinch, or with Ctrl and the mouse wheel. Someone who can use only one pointer cannot zoom, so the shop names stay too small to read.

    Examples

    Code that fails, and the fix

    Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    Fails

    Map that zooms only with a pinch

    Live preview

    JavaScript
    // Two fingers are the only way to zoom this store map.const map = document.getElementById('store-map');let zoom = 1;let lastGap = 0;const gap = (t) => Math.hypot(t[0].clientX - t[1].clientX, t[0].clientY - t[1].clientY);map.addEventListener('touchmove', (e) => {  if (e.touches.length !== 2) return;  e.preventDefault();  const d = gap(e.touches);  if (lastGap) zoom = Math.min(8, Math.max(1, zoom * d / lastGap));  lastGap = d;  map.style.transform = 'scale(' + zoom + ')';});map.addEventListener('touchend', () => { lastGap = 0; });

    A pinch is a multipoint gesture, and nothing else calls the zoom code. Someone who can use only one finger, a mouth stick or a head pointer has no way to zoom.

    Passes

    Zoom buttons beside the map

    Live preview

    HTML
    <div class="store-map">  <div id="store-map" role="img" aria-label="Map of shops on Main Street"></div>  <div class="map-zoom" role="group" aria-label="Map zoom">    <button type="button" id="zoom-in">Zoom in</button>    <button type="button" id="zoom-out">Zoom out</button>  </div></div>

    Each button changes the zoom by one step with a single tap or click. The pinch can stay as a shortcut for people who like it.

    Passes

    Buttons run the same zoom code

    Live preview

    JavaScript
    // Same zoom as the pinch, reached with one tap or click.const setZoom = (z) => {  zoom = Math.min(8, Math.max(1, z));  map.style.transform = 'scale(' + zoom + ')';};document.getElementById('zoom-in').addEventListener('click', () => setZoom(zoom * 1.5));document.getElementById('zoom-out').addEventListener('click', () => setZoom(zoom / 1.5));

    A click event comes from a tap, a mouse, a pen or the keyboard, so people who cannot pinch can still zoom in and out.

    Fails

    Photo gallery that changes only on a swipe

    Live preview

    JavaScript
    // Swiping left or right is the only way to see another photo.const gallery = document.getElementById('gallery');let startX = 0;gallery.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; });gallery.addEventListener('touchend', (e) => {  const dx = e.changedTouches[0].clientX - startX;  if (dx < -50) showPhoto(current + 1);  if (dx > 50) showPhoto(current - 1);});

    A swipe is a path-based gesture: the direction of travel decides what happens. With no buttons, people who can only tap or click are stuck on the first photo.

    Passes

    Previous and next buttons for the gallery

    Live preview

    HTML
    <section id="gallery" aria-label="Photos of the Harbor rain jacket">  <img id="photo" src="jacket-front.jpg" alt="Harbor rain jacket, front view">  <p id="photo-count">Photo 1 of 4</p>  <button type="button" id="prev-photo">Previous photo</button>  <button type="button" id="next-photo">Next photo</button></section>

    The buttons move one photo at a time with a single tap or click, so the swipe becomes a shortcut instead of the only way.

    Why it matters

    Who it helps

    People with limited dexterity or tremor, and those who use a head pointer, eye gaze, a mouth stick or a single finger, often cannot perform multi-finger or precisely traced gestures.

    W3C: Understanding 2.5.1

    • Level A

      Level A is the minimum: failing it can shut some people out completely.

    • In WCAG versions

      Added in WCAG 2.1 in June 2018, and kept in 2.2.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      Required where the law names WCAG 2.1 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Australia and New Zealand.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Find every feature driven by pinch, multi-finger or swipe gestures, such as maps, carousels, image viewers and custom sliders.
    2. Confirm each can also be done with single taps or clicks, for example zoom buttons, previous and next arrows or stepper controls.

    Common failures

    Where it breaks

    • A map zooms only by pinching, with no zoom in or zoom out buttons.
    • A carousel changes slides only when swiped, with no buttons to move between items.

    Related