WCAG Principle: Operable
Guideline 2.5: Input Modalities (Make it easier for users to operate functionality through various inputs beyond keyboard).
Conformance Level: A (Minimal Requirement)
Table of Contents
What is Success Criterion 2.5.2 (Pointer Cancellation)?
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.
This accessibility guideline aims to prevent accidental actions on websites. Essentially, it ensures that actions do not start immediately when you press a button or touch a screen. Instead, actions should happen when you lift your finger or mouse button (up-event). This allows users to change their mind and avoid mistakes. Here is a simple explanation of what this guideline requires:
-
No Down-Event
-
Abort or Undo
-
Up Reversal
-
Essential Down-Event
Actions don’t start when you press down. For instance, a link should not open just by pressing down on it. It should open when you release the click. This way, if you click by mistake, you can move the pointer away before releasing to avoid activating the link.
You can cancel or undo actions. A typical example is when you touch a button by mistake on your phone. You should be able to slide your finger away before lifting it to cancel the action.
Actions reverse when you lift the pointer. Let’s say you press and hold on a screen to open a menu, the menu should disappear when you lift your finger. This ensures that the action only stays active while you’re holding down.
Some actions must start on down-event. For example, pressing a key on a virtual keyboard should immediately type the letter when pressed down. This is essential for the expected behavior of typing.
How does it make your website accessible?
Enabling pointer cancellation events makes websites easier to use for everyone. Specifically, it prevents accidental clicks or touches, helping users avoid mistakes. It also provides ways to undo actions if they happen by mistake.
Who benefits from websites that meet this success criterion?
- People with motor disabilities who are more prone to accidental clicks.
- People with cognitive impairments who require predictable actions to reduce confusion.
- Users with visual impairments who need to prevent unintended actions from wrong clicks.
- Older adults who might have slower reaction times and benefit from having the chance to correct mistakes.
- All users benefit from reduced accidental actions.
How to Meet Success Criterion 2.5.2 (Pointer Cancellation)
Common mistakes on websites:
- Actions occur immediately when the user presses down, such as links opening or buttons activating on the down-event.
- Users cannot cancel or undo actions after they start them.
- Actions do not reverse when the user lifts the pointer, causing unintended effects to persist.
- Non-essential functions trigger on down-events, confusing users and causing mistakes.
- Users do not receive clear visual or auditory feedback indicating they can cancel or undo actions.
How to fix these mistakes:
- Ensure that actions occur when the user releases the mouse button or lifts their finger, not when they press down. A great way to implement this is by using mouseup or touchend events in your code.
- Allow users to cancel actions before they complete. For example, in a drag-and-drop interface, cancel the drag if the item is released outside the drop target.
- Make sure users can undo actions after they happen. For instance, include an undo button for actions like deletions or form submissions.
- Use down-events for actions only where it is essential.
- Show visual or auditory indicators that actions can be canceled or undone. A good tip is highlighting buttons or showing tooltips when dragging items to indicate cancel or drop zones.
Helpful tips for developers:
- Prevent multiple rapid clicks from triggering unwanted actions. You could debounce the click event on a “Load More” button to avoid multiple loads.
- Ensure the functionality works on both touch and mouse devices.
How to test if your websites meets conformance:
- Verify that actions are triggered on up-events. Click or touch a button and see if the action occurs when you release (not when you press down).
- Attempt to cancel an action by moving the pointer or finger away before releasing.
- Perform an action (e.g., deleting an item) and check if there is an option to undo it immediately after.
- Use both a mouse and a touchscreen to ensure that the interactions are consistent and accessible when using both input methods.
- Check for visual cues when interacting with elements. Ensure that buttons highlight or provide feedback indicating they can be canceled or undone.
- Make a mistake on purpose, like pressing the wrong button, and see if you can easily correct or undo the action.
Bad and Good Examples (Code Snippets)
Code example that fails success criterion 2.5.2 (pointer cancellation)
Code Snippet
<button id="delete-button">Delete Item</button>
<script>
const deleteButton = document.getElementById('delete-button');
deleteButton.addEventListener('mousedown', function() {
deleteItem(); // Function to permanently delete the item
});
</script>
This code triggers the deleteItem function immediately when the user clicks the button (mousedown event). This means there is no way to cancel the action if the user clicks by mistake. As such, this code example fails to meet WCAG standards relating to pointer cancellation.
Code example that meets success criterion 2.5.2 (pointer cancellation)
Code Snippet
<button id="delete-button">Delete Item</button>
<script>
const deleteButton = document.getElementById('delete-button');
deleteButton.addEventListener('mouseup', function() {
// Confirmation prompt before deleting
if (confirm("Are you sure you want to delete this item?")) {
deleteItem(); // Function to permanently delete the item
}
});
</script>
On the other hand, this code example uses the mouseup event to trigger the action. It also includes a confirmation prompt before deleting the item. This approach provides a clear way for users to cancel an action, improving accessibility for everyone.
Frequently Asked Questions
What is an example of pointer cancellation
An example of pointer cancellation is being able to slide your finger away from a button on a touchscreen before lifting it to cancel the button press.
What is a path-based gesture?
A path-based gesture is an input action that involves moving a pointer along a specific path. These include drawing a shape or tracing a letter on a touchscreen.
Are there any cross-browser compatibility issues to consider when implementing pointer cancellation?
Modern browsers consistently support pointer events. However, you may need fallbacks or polyfills for older browsers or non-standard devices.
How does success criterion 2.5.2 relate to other WCAG guidelines?
Pointer cancellation is closely related to guidelines Pointer Gestures and Label in Name.
