WCAG 2.2 Demo Suite

2.5.1 Level A Guideline 2.5 Input Modalities Added in WCAG 2.1 Not detectable automatically

Pointer Gestures

Functionality using multipoint or path-based gestures can also be operated with a single pointer without a path-based gesture, unless the gesture is essential.

Who this affects

Users with tremor or limited dexterity who cannot perform a pinch or swipe. Users of a head pointer or eye tracker, which produce single points only.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.5.1

Open the failing example in a new tab

fail.html — the problem

<h1>Staff picks</h1>

<!-- FAILURE 1: the only way to change slide is a horizontal swipe - a
     path-based gesture. There are no previous and next buttons.

     Who this excludes: anyone using a head pointer, eye tracker or switch,
     all of which produce single points and cannot trace a path; anyone with
     tremor who cannot hold a straight line; and every keyboard user. -->
<div class="carousel" id="car">
  <p class="slide" id="slide">Tidal Flats, by A. Marsh</p>
  <p>Swipe left or right to see more.</p>
</div>

<!-- FAILURE 2: pinch-to-zoom is the only way to enlarge the cover image.
     Pinch is a multipoint gesture; a single-pointer user cannot perform it. -->
<h2>Cover</h2>
<p>Pinch to zoom.</p>
<img src="../../assets/media/book-cover.svg" alt="Cover of Tidal Flats" width="120" height="170">

Meets 2.5.1

Open the passing example in a new tab

pass.html — the fix

<h1>Staff picks</h1>

<!-- FIX 1: the swipe still works for people who like it, but it is now an
     ENHANCEMENT. Previous and Next are real buttons, operable with a single
     tap, a keyboard, a switch or a voice command.

     2.5.1 does not ask you to remove the gesture. It asks you to make sure the
     gesture is not the only way. -->
<div class="carousel" id="car">
  <p class="slide" id="slide" role="status">Tidal Flats, by A. Marsh</p>
  <p>
    <button type="button" class="button button--secondary" id="prev">Previous pick</button>
    <button type="button" class="button button--secondary" id="next">Next pick</button>
  </p>
  <p>You can also swipe left or right.</p>
</div>

<!-- FIX 2: zoom controls alongside pinch. Note that the buttons are at least
     44 x 44 CSS pixels, which also satisfies 2.5.8 Target Size. -->
<h2>Cover</h2>
<p>
  <button type="button" class="button button--secondary" id="zin">Zoom in</button>
  <button type="button" class="button button--secondary" id="zout">Zoom out</button>
</p>
<img class="cover" id="cover" src="../../assets/media/book-cover.svg"
     alt="Cover of Tidal Flats" width="120" height="170">

<!-- The essential-gesture exception is narrow: it covers things like a
     signature pad or a drawing canvas, where the path IS the content.
     A carousel, a map and a slider are never essential gestures. -->

How to test it

Find every pinch-zoom, swipe, and multi-finger gesture. Confirm a single-tap alternative exists — buttons beside a carousel, zoom controls on a map.

  • Automated

    Gesture handlers live in script and must be discovered and tested by hand.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification