accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Touchscreen gestures

On this page:


Summary

Gestures made on a touchscreen should be made as easy as possible, without forcing the users to commit to an action.


Guidance

Please note this guideline provides informative guidance, but does not set requirements.

Common mistakes

Why?

Screen reader interaction modes makes more difficult to perform complex gestures, as they require two steps for focusing and activating the elements. It can also be a challenge for users with motor or dexterity impairments, as some multi-touch gestures could be difficult or impossible to perform.

Activating elements other than on mouseup or touchend prevents the user from changing their mind about the action they were trying to perform.

Official wording in the Web Content Accessibility Guidelines

3.4 Touchscreen Gestures: Many mobile devices are designed to be primarily operated via gestures made on a touchscreen. These gestures can be simple, such as a tap with one finger, or very complex, involving multiple fingers, multiple taps and drawn shapes.

Some (but not all) mobile operating systems provide work-around features that let the user simulate complex gestures with simpler ones using an onscreen menu.

Some best practices when deciding on touchscreen gestures include the following:

See the W3C’s detailed explanation of this guideline.


Guidance for Design

This section needs more content. Contribute via Github or email.


Guidance for iOS

This section needs more content. Contribute via Github or email.


Guidance for Android

The best way to ensure a correct behaviour is using existing system Views (such as Buttons, Checkboxes, etc) or extending from them.

However, if you need to customise your onTouch events, make sure to activate your element during the ACTION_UP event action:

 yourView.setOnTouchListener { view, event ->
     when (event.action) {
         MotionEvent.ACTION_UP -> {
             // Item was touched, react accordingly
             return@setOnTouchListener true 
         }
         else -> return@setOnTouchListener false
     }
 }

If you want to check if the touch event was within a view’s touch boundaries, you can use the event’s coordinates:

yourView.setOnTouchListener { view, event ->
    val rect = Rect()
    view.getHitRect(rect)
    if (rect.contains(event.x.toInt(), event.y.toInt())) {
        // Your event was within this view's boundaries.
        return@setOnTouchListener true
    }
    return@setOnTouchListener false
}

Guidance for Flutter

This section needs more content. Contribute via Github or email.


Guidance for Web

This section needs more content. Contribute via Github or email.


More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email