Skip to main content
WCAGrules
Quick navigation

Use native controls that activate on release

Native controls fire when the pointer is released, not when it goes down. Slide off before lifting and the action is cancelled. G212 says use them and inherit that behavior. This is a sufficient technique for 2.5.2 Pointer Cancellation at Level A, one of two for that rule. Not every down-event action is a failure, though, and W3C is explicit about it. A text input taking the caret on pointer-down passes, because the action is trivially reversible and the reader can move away while still holding. The general form of the test is that the action either fires on the up event or is reversible. W3C adds a note about the button element that catches people out. On its own it does nothing, unless it sits inside a form without a type, in which case it submits, so the advice is to attach input-agnostic click handlers rather than pointer ones.

How we find it in an audit

Our reviewers look for pointer-down and touch-start handlers that perform an action rather than preparing for one. Then we test by hand. Press, slide off, release, and check that nothing happened. Custom controls built from divs are where this concentrates, because a native button gets the behavior for free and a div has to be taught it.

How affected users experience it

People with tremors, limited dexterity, or a stylus they cannot hold steady make contact where they did not intend to. Firing on touch means the mistake is already done before they can correct it. Firing on release gives them the moment in between, which is the difference between an accidental brush and a deleted message. Nobody notices this feature until it is missing.

Passes vs. fails

Passes: targets big enough to hit. Fails: tiny, touching controls.

Passes

<button onclick="deleteMessage()">Delete</button>. Click fires on release, and sliding off the button before lifting cancels it for free.

Fails

With el.addEventListener("touchstart", deleteMessage), the message is gone the moment a fingertip brushes the control.

Other ways to satisfy this rule

3 guides on this site are filed under 2.5.2 Pointer Cancellation. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.

This guide is our interpretation of W3C technique G212: Using native controls to ensure functionality is triggered on the up-event.. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations