WCAG – 2.5.2 Pointer Cancellation (Level A)

2.5.2 Pointer Cancellation: For functionality that can be operated using a single pointer, at least one of the following is true: (Level A)

  • No Down-Event: The down-event of the pointer is not used to execute any part of the function;
  • Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;
  • Up Reversal: The up-event reverses any outcome of the preceding down-event;
  • Essential: Completing the function on the down-event is essential. (Functions that emulate a keyboard or numeric keypad key press are considered essential.)

Requirements

  • Interactive elements should only get activated when users release their tap/click, not as soon as they touch the element or press the mouse button down.

Why is it important?

If an interactive control fires as soon as it is touched, it causes difficulties for people with visual disabilities, cognitive disabilities, motor impairments, and many others.

It is better when there is a way to ‘undo’ or change your mind (for example, by dragging your mouse or finger away after having clicked or touched a control). This avoids accidentally triggering things on a page/screen.

Benefitted disability types

People with motor disabilities can accidentally trigger touch or mouse events with unwanted results. Activation can occur when someone touches a screen (down-event) or when they remove their finger (up-event). In mouse interaction, activation can occur when pressing (down-event) or when releasing the mouse button (up-event). Authors can reduce the problem of users inadvertently triggering an action by making activation on the up-event. This gives users the opportunity to move their finger or other pointer (e.g. mouse) away from the wrong target once they hit it.

Summary

  • Make sure that custom buttons or links do not activate as soon as they are touched, so that users can slide their finger or mouse away to cancel the action.

Common mistakes

  • Allowing controls or user interface components to fire as soon as they are touched.
  • After a user has made a selection of a user interface component, there is no way to dismiss the selection or undo the function.

Design Guide

  • Do not design buttons or interactive elements that trigger their associated functionality as soon as they are touched, or as soon as the user has press the mouse button down.

Pointer Cancellation Examples for Web

  • Use click or mouse-up events, not mouse-down events – Using click events will only trigger the event on release.

References

  1. MDN – Using Touch Events
  2. MDN – Pointer Events
  3. Accessibility Guidelines- Github.io