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.
Related Resources
No endorsement implied.
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.