Pointer Cancellation

This criterion reduces accidental activation of controls by mouse or by touch. It states:

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.

For most people, using a mouse or a touchpad to interact with a webpage is relatively easy. For people who have tremors, poor hand-eye coordination, difficulty moving their hands and fingers, or any other impairment that affects the hands, this simple task can be really tricky. It is so frustrating when you're moving around the page and your finger accidentally makes contact with the mouse button or the screen. This criterion helps prevent unwanted moves of this kind.

What are the 4 true statements?

In this criterion, there are 4 statements and one of them must be true for every interactive control... for everything you can click, select or activate by touch. Let's look at each one and what it means.

No down-event

The down-event of the pointer is not used to execute any part of the function.

You may have never thought about this before. When you click with a mouse or touch an interactive item on a touchscreen, when does the action happen? It should not happen on the down-event, but on the up-event.

For a mouse click, this means that the action doesn't happen until you release the mouse button. Just pressing the mouse button down doesn't make it happen.

For a touch, the action should happen when your finger leaves the screen, not when it touches the screen.

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.

Importantly, for both click and touch, the action should only happen when the up-event... the lifting of the finger or the release of the mouse button, occurs within the boundaries of the target. If the user accidentally clicks on something, but moves the mouse or their finger before letting go, the action should not happen. This is how it helps prevent accidental interactions.

This gets trickier with complex interactions such as drag and drop, where the down-event and the up-event perform different parts of the same interaction. However, I'm not going to go into drag and drops, as they come under the new WCAG 2.2 criterion 2.5.7 Dragging movements.

Up reversal

The up-event reverses any outcome of the preceding down-event.

I don't see many examples of this, but up reversal is where the down-event triggers an action, such as displaying a pop-up. The up-event reverses the action, removing the pop-up. In this case, if the user accidentally activates a control, just letting go will undo it.

Essential

Completing the function on the down-event is essential.

I can't think of many situations where activating a control on the down-event is essential. It could include simulation activities, such as a piano keyboard or other instrument, where timing is a critical part of its use. It could include games, where shooting or moving is dependent on instant recognition of the click or touch.

In most situations though, it is not essential.

What do you need to do?

I think this is the good news part. In most cases, all you need to do is stick to using native HTML components. They will pass this criterion by default. You are only likely to fail this one by creating custom widgets, using JavaScript to activate controls... and there are a lot of reasons why I would avoid doing that.