Technique G212:Using native controls to ensure functionality is triggered on the up-event.

About this Technique

This technique relates to 2.5.2: Pointer Cancellation (Sufficient).

This technique applies to nearly all technologies.

Description

The objective of this technique is to ensure that users who attempt to interact with a control do not trigger the action of the event accidentally. This can be accomplished most directly by relying on the pointer's up-event (for example, the onclick or mouseup event).

The easiest way to meet this success criterion is simply to use the default behavior of controls and not override that behaviour with an explicit down-event trigger. The up-event is the default behaviour for almost all controls and any programming or markup language.

In native languages where a control is fired on the down event it is usually for good reason and is easily recoverable. For instance, an HTML input element could have the cursor enter the editable area on the “pointer down” event, because the action is trivially reversible, and as such meets the requirements of the Pointer Cancellation SC. This is because if the user realizes they made a mistake after pressing down the control, they can simply move their pointer away from the hit area while still holding down the pointer, then release their pointer and the event is not triggered.

Examples

Example 1: Using an native onclick event in JavaScript

In JavaScript native onclick events are triggered on the up-event by default.

Example 2: Using a native button or link in HTML

In HTML native <button> or <a href ....> onclick events are triggered on the up-event by default.

Note

The <button> element doesn't do anything on its own (unless its part of a <form>, and does NOT have <type="button">, in which case it submits the form). Authors should rely on input-agnostic click handlers.

Example 3: Using a native button in iOS or Android

In native buttons in iOS and Android onclick events are triggered on the up-event by default.

Note

The WCAG standard itself applies to web pages, and therefore this example is provided as helpful supplementary advice for those looking to implement the WCAG2ICT for native applications.

Related Resources

No endorsement implied.

Mozilla web docs for the click event

Tests

Procedure

For all clickable controls:

Activate the down-event then move the pointer outside the target before triggering the up-event, and then release the pointer to trigger the up-event.
Check that the action was not triggered when the pointer is released outside of the hit area for the target.
If the action is triggered, check that the action is reversible.

Expected Results

Check #2 or #3 is true.