2.5.2 Pointer Cancellation

What this rule means

WCAG 2.5.2 addresses accidental activation of controls. When users interact with a pointer (mouse, touch, stylus), the action should not fire on the down-event (mousedown, touchstart, pointerdown) alone. Instead, the action should complete on the up-event (mouseup, touchend, pointerup) or provide a way to abort or undo.

The criterion specifies four acceptable approaches: do not use the down-event to execute the action; complete the action on the up-event; provide an abort mechanism where users can move the pointer off the target before releasing; or provide an undo mechanism after the action completes.

Why it matters

Users with motor impairments frequently touch or click on the wrong target accidentally. If actions fire immediately on pointer-down, there is no opportunity to correct the mistake. By deferring action to pointer-up, users can move their finger or cursor off the target to cancel the action before it executes.

This pattern mirrors the native behavior of most operating systems and browsers. Standard HTML buttons and links already activate on click (which is a down-then-up sequence), so this criterion mainly affects custom JavaScript interactions that bind to mousedown or touchstart events.

Related axe-core rules

There are no automated axe-core rules for pointer cancellation. Testing requires manual interaction to verify that actions do not fire on pointer-down alone and that users can abort by moving the pointer away from the target before releasing.

How to test

1. Press and hold (mousedown/touchstart) on interactive elements without releasing.
2. While holding, drag the pointer away from the element, then release. Verify no action fires.
3. Press and release on the element normally to confirm the action still works on the up-event.
4. Search the codebase for mousedown, touchstart, and pointerdown event listeners that trigger actions directly.
5. Confirm that any actions triggered on down-events have an undo mechanism or abort path.

How to fix

Use up-events rather than down-events for triggering actions. Here are common patterns.

Click handler — bad practice

// Fires action on pointer-down with no abort path
button.addEventListener('pointerdown', (e) => {
  deleteItem(e.target.dataset.id);
});

Click handler — good practice

// Uses click event (up-event) — allows abort by
// moving pointer off target before releasing
button.addEventListener('click', (e) => {
  deleteItem(e.target.dataset.id);
});

// Or using pointerup with hit-test verification
button.addEventListener('pointerup', (e) => {
  const target = document.elementFromPoint(e.clientX, e.clientY);
  if (target === button || button.contains(target)) {
    deleteItem(button.dataset.id);
  }
});

Touch events with abort mechanism

let activeTarget = null;

element.addEventListener('pointerdown', (e) => {
  activeTarget = e.target;
  e.target.classList.add('pressed'); // Visual feedback only
});

element.addEventListener('pointerup', (e) => {
  const released = document.elementFromPoint(e.clientX, e.clientY);
  if (released === activeTarget) {
    performAction(activeTarget); // Action on up-event
  }
  activeTarget?.classList.remove('pressed');
  activeTarget = null;
});

Common mistakes

• Binding destructive actions (delete, submit, send) to mousedown or touchstart events.
• Using pointerdown to immediately navigate to a new page without allowing the user to abort.
• Custom drag-and-drop implementations that commit the drop action on pointerdown rather than pointerup.
• Triggering form submission on touchstart, preventing users from sliding their finger off the submit button to cancel.
• Using onmousedown in HTML attributes for critical actions like purchases or deletions.