������̳

Users will use a variety of input methods, sending different signals that can be listened for programmatically to trigger actions. This could be moving a mouse, touching a screen or pressing a key. It could also be using other controllers or assistive technology to mimic these interactions.

For mouse, touch and other pointer style interactions the most appropriate trigger will be a high level “click” event or an event at the end of the interaction. This allows users to change their mind and adjust focus, without being forced to commit to an action until the clicked mouse, or touch is removed.

For keyboard style interactions the most appropriate trigger will be a high level “keypress” event or an event at the start of the interaction. These users have already chosen focus.

Which trigger is most appropriate may vary for some interactive content.

---

iOS

Native UIKit views and page elements handle touch events (including multitouch events) by default, and will only respond when touch is removed. However, extra effort is required to ensure touch events are handled correctly in custom views using either or . Refer to the examples in the linked documents for further information.

---

Android

Native Android elements handle touch events by default. Custom actions can be performed using motion events and key events. However, be aware that the information returned by each of these event type depends on the device type and the input device. Refer to the and pages for further guidance.

Android Pass Example

//A touch event listener attached to an element to perform an action on ACTION_UP
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
if(action == MotionEvent.ACTION_UP){
...
}
 
return false;
}

---

HTML

Native HTML elements handle touch events by default. Use the onclick and onkeypress events to trigger actions where possible.

HTML Pass Example

<!-- Preferable (native elements) -->
<button onclick="…">Click me to do something!</button>

<!-- Custom actions -->
<script>
function startGesture(e) {
  // store touch start source
}
function endGesture(e) {
  // if touch end source is different from touch start source return, else perform action
}
</script>
...
<div onTouchStart="startGesture(this);" onTouchEnd="endGesture(this);"> Swipe area </div>

---

Testing

Procedures

1. Navigate the app using the touchscreen.
2. Navigate to the on-screen objects, elements, or controls.
3. Begin to activate an item (touch it without lifting your finger or stylus).
4. Verify that the item does not immediately trigger an action/event.
5. Finish activating the item (remove your finger or stylus from the screen).
6. Verify that the item now triggers the action/event.

Outcome

The following checks are all true:

• Objects, elements, or controls do not trigger actions/events at the start of activation (when touched);
• Objects, elements, or controls trigger actions/events when the user finishes activation (touch is removed).

---