Operable · 2.5 Input Modalities

Pointer Cancellation WCAG 2.5.2 · Level A

For single-pointer functions, at least one must hold: the down-event does not trigger the action; the action completes on the up-event and can be aborted or undone; the up-event reverses the down-event; or completing on the down-event is essential, as when emulating a keyboard key press.

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

Live demo

Press, slide away and let go

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.

Press down on Delete message and keep holding. Slide the pointer off the button, then let go. Try it in both versions.

Live example

Passes

Inbox

Priya Shah

Photos from the weekend

Here are the pictures from the lake. The one with the red boat is my favorite.

What happened

    Why it passes

    Nothing happens until you let go over the button. If you pressed it by mistake, you slide away before releasing and the message is kept.

    Why it fails

    The message is deleted the moment you press down. Sliding away does not help and there is no undo, so a slip of the finger loses the email.

    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.

    01What changes 3 lines

    Fails

    Delete runs on pointerdown

    Live preview

    JavaScript
    // The message is gone the moment a finger or mouse button goes down.const del = document.getElementById('delete-message');del.addEventListener('pointerdown', () => {  deleteMessage(messageId);});

    The action completes on the down-event, so someone who presses the wrong button cannot slide off to cancel it, and there is no undo.

    Passes

    Delete runs on click

    Live preview

    JavaScript
    // The browser fires click on the button only when both the press// and the release happen on it.const del = document.getElementById('delete-message');del.addEventListener('click', () => {  deleteMessage(messageId);});

    The action waits for the up-event. Moving the pointer off the button before letting go abandons it, and click also works from the keyboard.

    Fails

    Links opened on touchstart to feel faster

    Live preview

    JavaScript
    // Opens the product as soon as a finger touches the card, even to scroll.document.querySelectorAll('.product-card a').forEach((link) => {  link.addEventListener('touchstart', () => {    window.location.href = link.href;  });});

    A person who touches a card only to start scrolling is taken to the product at once. The down-event completes the action, so it cannot be aborted.

    Passes

    Plain links that open on release

    Live preview

    HTML
    <ul class="products">  <li class="product-card">    <a href="/shop/harbor-rain-jacket">Harbor rain jacket</a>  </li></ul>

    Without a down-event handler, the browser follows the link only when the tap or click is released on it, and cancels it when the finger moves to scroll.

    Passes

    On-screen keyboard keys may act on press

    Live preview

    JavaScript
    // Each key of an on-screen keyboard types on press, like a real key.document.querySelectorAll('.keyboard-key').forEach((key) => {  key.addEventListener('pointerdown', () => {    typeCharacter(key.dataset.char);  });});

    The criterion treats functions that emulate a keyboard or numeric keypad key press as essential, so acting on the down-event is allowed here.

    Why it matters

    Who it helps

    People with motor impairments, tremor or low vision often press the wrong target by accident. Letting them slide off before releasing, or undo the action, prevents mistakes they did not intend.

    W3C: Understanding 2.5.2

    • 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. For each clickable or tappable control, press down on it, move the pointer off the target, then release, and confirm nothing is activated.
    2. Where an action does fire on press, confirm it is reversed on release, can be undone, or is essential, such as a key on an on-screen keyboard.

    Common failures

    Where it breaks

    • Buttons or links act on mousedown or touchstart, so an accidental press cannot be cancelled by sliding off.
    • A menu item is chosen as soon as the pointer is pressed, with no way to abort or undo the selection.

    Related