2.5.2 - Touch or click cancellation
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.
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.
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?
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.
Official wording in the Web Content Accessibility Guidelines
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.)
See the W3C's detailed explanation of this guideline with techniques and examples.
Guidance for Design
- 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.
Guidance for Web
Use click or mouse-up events, not mouse-down events
Using click events will only trigger the event on release.