Pointer Cancellation is a standard that allows users to cancel an action that would occur on a click (or equivalent action) by moving the pointer away from the target area.

Note: This requirement applies to web content that interprets pointer actions. This does not apply to actions that are required to operate the user agent or assistive technology.

How Pointer Cancellation Works

The event should activate on the “up input” (releasing the mouse button) or be activated for as long as the button is pressed, reverting once it is no longer being pressed, except for actions where activation on the “down input” (when you press the mouse button) is necessary or intuitive, such as keyboard emulation.

The technique is applicable to any technology that supports pointer input, such as mouse pointer, touch on touch screen or trackpad, stylus input, or laser pointer input. 

How to Successfully Incorporate Pointer Cancellation

Drag-and-Drop Action Cancellation Examples

• A site shows a file directory. Files can be picked up and moved over a trash can icon to delete it. When the picked-up file is released outside this target, it reverts to the old position.
• A site shows a file directory. Files can be picked up and moved over a trash can icon to delete it. When the picked-up file is released over the trash can, a modal dialog asks the user to confirm or cancel the delete action.

Native Control Examples

• When using JavaScript, do not use on mouse down. Mouse down will override onclick.
• When using a native button or link in HTML, the HTML native <button> or <a href ....> onclick events are triggered on the up-event by default.
• When using a native button in iOS or Android, the onclick events are triggered on the up-event by default.

Testing

For content that is draggable, check whether the drag-and-drop action can be reversed by:

1. Releasing the picked-up item outside a drop target.
2. Dragging the picked-up item back to its old position.
3. A confirmation dialog or an undo control appears after the item has been dropped.

For input controls:

1. Examine each input that has adjacent text which serves as its label.
2. For each input, check that the entire string of text (disregarding letter case and punctuation) matches the accessible name for the input, according to the accessible name computation.
3. For buttons, links, menus, and other non-input controls examine each control that contains text which serves as its label.
4. For each non-input control, check that the entire string of text (disregarding letter case and punctuation) matches the accessible name for the input.

Recommended Training*

• WebAIM Virtual Web Accessibility Training from MNIT Office of Accessibility: What's New in WCAG 2.1 & Evaluation Tools
• W3C Schools: Accessibility Introductory Tutorial

*This list is not comprehensive. We have provided references used successfully by state employees.

Why is Pointer Cancellation Needed?

It is important to have pointer cancellation for people who can’t accurately use a mouse/keyboard, because they might accidentally press something they didn’t mean to. When you want to put mouse down (button pressed) events in your web page, ask yourself if the page functions as well with a mouse up (button released) event instead.

References

• WebAIM: Introduction to WCAG 2.1 Video
• MNIT: WCAG 2.1 - A Deeper Dive Presentation
• WebAIM's WCAG 2 Checklist