M003 - Activating elements via the mouseup or touchend event

Technique Category

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.

Applicability

Mouse and touch input modes.

WCAG references

Relevant Guidelines

Relevant WCAG 2.0 Success criteria:

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


Related Techniques

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

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

Test Files