AccessibilityGestures and motion
Some ways of interacting with content and functionality across desktop and mobile are complex and can cause accessibility issues.
These include:
- path-based gestures - gestures where the start, intermediate and end points all matter, for example swiping, sliders and carousels requiring interaction
- multi-point gestures - gestures that need more than one point of contact, such as pinch to zoom used on a map component, or two or three finger tap
- device motion - used to trigger an action, such as shaking or tilting
Where these are present, users must be made aware that an alternative exists and be able to use this functionality with a keyboard or single-point gesture. User research should inform any assumptions about how this functionality should be presented.
For example, when a map view supports a pinch gesture to zoom content, that functionality should also be made available as buttons.
If a user has mistakenly pressed down on the mouse button or touched the screen on an interactive component such as a button or link, they should be able to stop the action by moving the cursor or touch away before releasing.
Helping everyone
Providing alternative controls benefits everyone by presenting all functionality as easily actionable interface elements which do not need complicated interactions.
Allowing users to cancel an action by moving the cursor away before releasing makes it easier for all users to recover from mistakes.
The basics
Do:
- for any functionality which needs a path-based or multi-point gesture, provide an alternative way to trigger the functionality using a single pointer
- inform users of all the ways that they can use certain functionality
- provide a button or other control for any functionality that is initiated by motion, such as tilting or shaking a device
- ensure users are able to switch off the need to use device motion for functionality
- activate functionality only when the control is released by the user, by lifting a finger from the screen or releasing the mouse button
- provide buttons and controls that are large enough for users to easily activate
Do not:
- include functionality that needs a multipoint or path-based gestures, or device motion such as shaking or tilting, without providing an alternative
- trigger functionality when a user first clicks on a component
| User | Access need | May find helpful |
|---|---|---|
| Partially sighted | A way to avoid activating a control by accident | Ability to move away from the control to cancel action |
| Motor impairments such as tremors | Cannot perform complex path-based or multi point gestures A way to avoid activating a control pressed by accident A way to avoid accidentally triggering controls via device motion A way to activate controls that does not rely on precise movement | Alternative controls Ability to move away from the control to cancel action Ability to turn off motion controls Large buttons and controls for easy interaction |
| Mobility impaired or unable to move device | Unable to perform motions such as tilting or shaking | Alternative controls |
| Cognitive and learning disability, people with low digital literacy | May be unaware of complex pointer gestures A way to avoid activating a control by accident | Simple user interface elements for functionality Ability to move away from the control to cancel action |
Creating good interaction with functionality
Alternative controls for path-based and multi-point gestures
If you are using gesture controls like drag-and-drop or pinch zoom, provide a single pointer equivalent that doesn't need path-based and directional gestures.
Users must be aware that the alternative exists and be able to activate it with keyboard or single pointer operation.
For example, with slider controls you could provide buttons, or allow a user to type in a number, to increase or decrease the value. For pinch to zoom controls, you could provide the magnification options as buttons.
Ensure that gestures available on a mobile device have an accessible alternative which is communicated to all users.
Any buttons and controls used should be large enough for users to easily activate. See the benefits that large links, buttons, and controls have for people with motor and mobility impairments.
Alternative controls for motion operation
On mobile applications, where something happens when the user tilts or shakes the device, provide and tell all users about an alternative way of performing the action that does not rely on motion.
Tell all users how to switch off motion controls in site settings altogether, as this may result in a user accidentally triggering functionality.
Action on up-event
Activation of any function should occur on the up-event - lifting a finger from the screen or mouse button. Using the click event by default will only trigger the action on release.
After clicking the mouse or touching the screen, users must be able to cancel the action that would be executed on releasing the mouse button or touch input. This means that if a user selects a control but moves the mouse away from the control before releasing it, the functionality should not be triggered.
Get in touch
If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.