M003 - Activating elements via the mouseup or touchend event

Technique Category

• Mobile Techniques
• General Techniques?

This applies in a very similar way to both mouse interaction and touch interaction, so it is not really a mobile-specific technique.

Technique Status Category

Status

This technique is based on the Touch Events guideline in the BBC Mobile Accessibility Guidelines.

• Written by Detlev Fischer
• @@ Link to survey when surveyed by group
• @@ Notes on work still needed before the technique is ready to publish, such as user agent support notes, etc.

Applicability

Mouse and touch input modes.

WCAG references

Relevant Guidelines

• Principle 2: Operable
• Guideline 3.2 Predictable

Relevant WCAG 2.0 Success criteria:

• 3.2.1 On Focus

Note: No fitting success criteria under guideline "Operable" (due to its exclusive keyboard focus)

User Agent and Assistive Technology Support Notes

Description

The objective of this technique is to prevent the unintentional triggering of events in touch and mouse interaction. Mouse users clicking on actionable elements (links, buttons, submit inputs) should have the opportunity to move the cursor outside the element to prevent the event from being triggered. This allows users to change their mind without be forced to commit to an action.

In the same way, elements accessed via touch interaction should trigger the event (navigation, submits, etc.) only when the touchend event is fired (i.e., the user has lifted the finger off the screen AND the last position of the finger is inside the actionable element AND equals the position at touchstart).

Examples

• A web form for online purchasing includes a "Buy now" submit at the end of the order form. A mouse user clicking on the submit input but releasing the mouse button outside its boundaries will not fire the event and thereby not commit to the action of purchasing.
• An app presents a "Buy now" button end of the order form. A user using a smartphone touch screen touching the button but lifting the finger outside the button's boundaries will not trigger the action of purchasing.

Related Techniques

• G107: Using "activate" rather than "focus" as a trigger for changes of context

Tests

The test procedures for mouse and mobile interaction modes are similar, but they differ regarding the possible availability of secondary actions on touch devices, for example, to bring up a contextual menu. Secondary actions may be triggered when touching an element and continuing to hold it. The availability of such secondary actions depends on the respective platform convention and the implementation in the app under test.

Procedure (mouse input mode)

1. For all actionable elements, position mouse pointer over the element and press the mouse button down
2. check that no action is triggered (apart from changing the visual state the element)
3. Move mouse pointer putside the element and release the mouse button. Check that no action is triggered (e.g. on mouseleave)

Expected Results

• #2 and 3 are true

Procedure (touch input mode)

1. For all actionable elements, touch the element with a finger, leaving the finger on the element
2. Immediately move finger outside the element and lift off finger outside the element boundaries
3. Check that the element's associated action is not triggered

Expected Results

• 3 is true

Test Files