2.6.2 - Touchscreen Gestures
Learn about best practices for designing touchscreen gestures that are easy to perform and accessible to all users. Follow the Web Content Accessibility Guidelines (WCAG) to ensure inclusive interaction on touchscreens.
Summary
Design touchscreen gestures to be as easy as possible, without forcing users to commit to an action.
Guidance
Please note that this guideline provides informative guidance but does not set requirements.
- Make gestures as easy as possible to carry out. Complex gestures involving multiple fingers, taps, or drawing shapes can be challenging or impossible for screen reader users. Provide an alternative setting using simple taps or swipe gestures.
- Activate elements on
mouseup
ortouchend
events. If the first and last position of the pointer/finger was inside the element, it is safe to assume interaction with the element. However, if the last position was outside the element where it started, the element should not be activated.
Common Mistakes
- Assuming that users can easily perform gestures with two or more fingers.
- Lack of indicators to remind users how to use gestures (e.g., swipe from the left side to open a menu).
- Activating elements on touch or mouse interaction.
- Activating elements on
touchend
even when the last position of the pointer/finger was outside the element.
Why?
Complex gestures can be challenging for screen reader users, as they require two steps for focusing and activating elements. Users with motor or dexterity impairments may also struggle with multi-touch gestures, which could be difficult or impossible to perform.
Activating elements other than on mouseup
or touchend
events prevents users from changing their minds 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:
- Gestures in apps should be as easy as possible to carry out. (...)
- Activating elements via the
mouseup
ortouchend
event. (...)
For detailed explanations of this guideline, refer to the W3C's documentation.
Guidance for Design
This section needs some ❤️
Contribute via Github
Guidance for Web
This section needs some ❤️
Contribute via Github