This third post in our ongoing series of new WCAG 2.1 Success Criteria covers the next success criterion within the new 2.5 Input Modalities guideline aimed at mobile: 2.5.2 Pointer Cancellation (Level A).

Guideline 2.5 Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.

SC 2.5.2 Pointer Cancellation (Level A)

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.

Note:
Functions that emulate a keyboard or numeric keypad key press are considered essential.

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

Overview

This success criterion is a bit more challenging to understand. It helps people with tremors or mobility impairments who may touch or click on the wrong location by mistake. This mistake can cause an unintended action. This success criterion also benefits people with cognitive disabilities. They get confused when something unexpected happens because they activated a control by accident. All users benefit from the addition of undo. Let’s examine each part of the success criterion.

No Down Event

The down event activates at the moment when you press down a mouse button, touch down on a surface, or press down a key. The associated action is immediately carried out. When action happens on the down event, clicking or touching in the wrong location causes an unanticipated event. If no actions occur on the down event, a user is less likely to invoke that action by mistake.

Abort or Undo

The up event refers to releasing the pressed mouse button, lifting a finger or pointer, or releasing a key. When the action happens on the up event, the user can verify that the finger or pointer is over the correct location before lifting it to cause the action. To cancel the action, the user can release the pointer when it is not over the target. The developer can also provide an option to undo the action.

Up Reversal

If the user touches down on the wrong location she can slide her finger or pointer off of that location before lifting it. This will cancel the unintended action.

Essential

Applications to simulate playing the piano or drums need the action to happen on the down event. It would be unnatural if the sound of a piano key press happened when you lift your finger from the key. Playing the Whack-a-Mole game would be awkward if the mole was not “hit” until you lifted the hammer.

Whack-a-mole game to hit mole characters with a hammer when they pop up, image source agame.com/game/whack

Example

An application that accepts donations can provide more than one way to make a donation.

  • The user makes a donation by clicking on a coin shaped button with the donation amount. The user can move the pointer off of the coin before releasing it to stop the donation.
  • Another example uses drag and drop. The user clicks down and drags the coin into a donation bucket. The user cancels the donation by releasing the pointer before it is over the target bucket.
  • In the drag and drop example, when the user releases the coin into the bucket, a confirmation dialog requires the user to confirm the donation. Of course to support success criterion 2.1.1, the drag and drop example also provides full keyboard support!

The following example video shows a drag-and-drop donation flow: First the events are cancelled by not dragging the dollar amount over the target area, When the dollar amount is dragged over the target area, a button asks for confirmation of the donation. Finally, at the end of the video the mouse clicks the confirmation button by mistake but moves the mouse pointer from the button before releasing it, cancelling the button click.

Take-away

Design actions to happen on the up event and provide a mechanism to abort or undo the action. Developers should use the built-in, generic onclick events that happen on the up event by default. Only use the down event when the the behavior is essential.

Drag and drop example video - CC BY-SA 4.0 by Eric Eggert