Loading...
Loading content...
Loading content...
Actions should trigger on the 'up' event, not the 'down' event, to allow cancellation.
Why it matters: Prevents accidental clicks/taps.
For functionality that can be operated using a single pointer, at least one of the following is true: (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.
What This Means: This success criterion requires that actions triggered by pointer input (mouse, touch, stylus) should not activate on the 'down' event alone. Instead, actions should trigger on the 'up' event, allowing users to cancel by moving the pointer away before releasing. Alternatively, if actions must trigger on down, there must be a way to abort or undo them.
Why It's Important: Users with motor disabilities, tremors, or limited dexterity may have difficulty with precise pointer control. If an action triggers immediately when they press down, they may accidentally activate functionality they didn't intend. By requiring actions to trigger on the up event, users can move the pointer away to cancel if they realize they've pressed the wrong element.
Use click events (which trigger on up) instead of mousedown, touchstart, or pointerdown events for actions. For destructive actions like delete, provide undo functionality. Ensure users can move the pointer away before releasing to cancel actions. The key is that users should have a way to prevent accidental activations.
This criterion ensures that users with motor disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with tremors can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Button deletes item immediately when mouse is pressed down, no way to cancel.
<button onmousedown="deleteItem()">Delete</button>Button only deletes when mouse is released, allowing user to move away to cancel.
<button onmouseup="deleteItem()">Delete</button>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.5.2 Pointer Cancellation are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
Click events automatically handle this correctly.
Click events do trigger on up, but if you use mousedown, touchstart, or pointerdown directly, you need to ensure actions trigger on up or provide cancellation.
This only applies to buttons.
This applies to all single-pointer interactions, including custom interactive elements, draggable items, and any clickable content.
Using onmousedown or ontouchstart to trigger actions immediately.
Use onclick, onmouseup, or ontouchend instead. If you must use down events, trigger actions on up events or provide undo.
No way to cancel actions once pointer is down.
Ensure actions trigger on pointer up, allowing users to move pointer away to cancel. Or provide undo/abort options.
Destructive actions without undo or confirmation.
Add undo functionality or confirmation dialogs for destructive actions. Allow users to cancel before action completes.
Note: These are official W3C resources for 2.5.2. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.5.2 Pointer Cancellation correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Operable PrincipleGuideline
2.5 Input Modalities