WCAG 2.2 - Success Criterion
2.5.2 Pointer Cancellation
Description
For functionality that can be operated using a single pointer (mouse click, touch tap, or stylus), at least one of the following must be true: the down-event is not used to execute the function; the function is executed on the up-event and a mechanism exists to abort or undo it before completion; the up-event reverses any outcome of the preceding down-event; or completing the function on the down-event is essential. This criterion prevents accidental activation of controls because users can cancel a pointer action by moving away before releasing.
How To Test
- Identify all interactive controls on the page: buttons, links, custom widgets, and touch targets.
- Press and hold the mouse button down on a control, then drag the pointer away from the control before releasing.
- Verify that the action is NOT triggered when you drag away and release outside the control.
- Confirm that activating the control only occurs when the pointer is released (up-event) while still within the control's bounds.
- For touch devices, perform the same test: tap and hold on a control, then slide your finger away before lifting - the action should not fire.
- Check whether any JavaScript event listeners use
mousedown,touchstart, orpointerdownto trigger primary actions directly.
Testing Tools
- axe DevTools — Browser extension. Install from official page, open DevTools, go to axe tab, run scan. Look for focus order, keyboard trap, and focus visible violations.
- NVDA — Free screen reader for Windows. Download and install, then open Firefox and navigate the demo using Tab, Shift+Tab, arrow keys, and Enter. Listen for focus announcements.
- Browser DevTools Accessibility Inspector — Built into all browsers. Right-click on a focused element, select "Inspect", open DevTools, go to Accessibility tab to see the accessibility tree and focus properties.
Demo 1: Pointer cancellation demo
The button below fires on pointerdown - the action triggers the instant you press, with no opportunity to cancel.
Try pressing and dragging away before releasing - the action already fired.
The button fires on click (pointer up). Press and drag the pointer away from the button before releasing to cancel the action.
Press, drag away, then release - no action fires. Release on the button to confirm.
Code
Demo 2: Undo Mechanism for Destructive Actions
Clicking "Remove" instantly removes the item with no confirmation or undo. Users with motor impairments who accidentally click have no recourse.
Item permanently deleted. No undo available.
No confirmation dialog, no undo — action is immediate and irreversible.
Clicking "Remove" shows a confirmation with an undo option. Users can reverse an accidental action, satisfying the "abort or undo" requirement.
Confirmation with undo — the action can be reversed, meeting the abort/undo requirement.
Code
Fail Explanation
A failure occurs when functionality triggers immediately on the pointer down event (mousedown or touchstart) with no way to abort or reverse the action before releasing the pointer. For example, a "Delete account" button that executes the deletion the instant the user presses down - before they even release the mouse button - means a user who mis-clicks cannot simply slide their pointer away to cancel. Users with motor disabilities that cause involuntary movements or tremors are particularly affected, as they may frequently trigger down events unintentionally.
Pass Explanation
A passing implementation triggers actions on the pointer up event (mouseup or click), which is the browser default for standard HTML buttons and links. When an action is triggered on the up event, users can press down on a control, change their mind, drag the pointer away, and then release without activating the function. For more critical actions, an additional undo mechanism (such as a confirmation dialog or an undo command) provides an additional safety net. Drag-and-drop operations where down-event initiation is necessary may be acceptable if the drag can be canceled before drop completion.
Notes
Standard HTML <button> and <a> elements natively fire their actions on the up-event by default, so they pass this criterion without additional effort. Failures typically arise from custom JavaScript event handlers that bind to mousedown or touchstart for performance reasons without a corresponding cancellation mechanism. This criterion does not prohibit down-event triggers for actions where it is essential, such as piano keyboard simulations or drawing applications.
Techniques
WCAG techniques used in this demo: G210, G212