WCAG Principle: Operable
Guideline 2.5: Input Modalities (Make it easier for users to operate functionality through various inputs beyond keyboard).
Conformance Level: A (Minimal Requirement)
Table of Contents
What is Success Criterion 2.5.4 (Motion Actuation)?
Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:
- Supported Interface
The motion is used to operate functionality through an accessibility supported interface; - Essential
The motion is essential for the function and doing so would invalidate the activity.
This accessibility guideline aims to ensure accessibility for users who cannot perform motions due to disability, injury or situational limitations. Motion actuation is a technology that allows devices to detect and respond to physical movement. Typical examples are when you shake your phone to undo an action or raise a hand to take a selfie.
While such motion-based features may be convenient (or even fun) for some, it causes accessibility issues for users with physical disabilities. Therefore, this criterion requires that websites provide alternative interaction methods besides motion gestures.
Alternative options could include standard user interface controls such as links or buttons, keyboard shortcuts, and voice or switch controls. Moreover, users must have the option to disable motion controls to prevent triggering an action by mistake.
However, there are two exceptions to this rule. The first is in situations where the motion input uses an accessibility supported interface. This means that the device or application provides alternative methods for input that are accessible to users with disabilities.
The second exception is if motion is essential for the core functionality itself. In this case, disabling motion would invalidate the experience. For example, a fitness app tracking steps via device motion is exempt as motion is critical to its purpose.
How does it make your website accessible?
Meeting this criterion makes websites more inclusive for users with motor disabilities or temporary impairments that limits their mobility. This promotes equal access and independence when using digital products and services.
Who benefits from websites with alternatives to motion-activated functions?
- Users with limited mobility, tremors, paralysis or other conditions affecting motor control.
- All web users, especially in situations where device motion is impractical or unsafe. These include while walking, driving or holding a device with one hand.
How to Meet Success Criterion 2.5.4 (Motion Actuation)
Common mistakes on websites:
- Relying solely on device motion for web functions.
- Lack of alternative controls for motion-activated functions.
- No option to disable motion input controls.
How to fix these mistakes:
- Ensure all motion-activated functions have standard user interface (UI) controls like buttons, links, or keyboard shortcuts.
- Allow users to turn off motion controls in settings or preferences.
- Check documentation to ensure motion inputs use accessibility supported interfaces.
Helpful tips for developers:
- Test if web functions work when motion settings are disabled on the device.
- Provide clear instructions that explain existing motion gestures and their alternatives.
- Design multiple accessible ways to activate functions from the start.
- Let users disable motion detection system-wide if possible.
- Ensure all alternatives to motion-based actions are accessible via keyboard and clearly.
How to test if your websites meets conformance:
Motion actuation is one of the WCAG success criteria that requires manual testing. This is because automated testing tools cannot simulate physical movements or fully assess if motion-controlled website functions provide accessible alternatives.
With that in mind, here are the steps to follow to manual test for conformance:
- Identify all functionality triggered via device motion or user gestures.
- Turn off motion controls and attempt to complete those functions using only standard UI components.
- Check if motion/gesture inputs can be disabled in settings.
- Conduct user testing with people with disabilities to verify accessibility.
If steps 2, 3, 4 and 5 are true, then the website meets this success criterion.
Bad and Good Examples (Code Snippets)
Code example that fails success criterion 2.5.4 (motion actuation)
Code Snippet
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
<script>
window.addEventListener('devicemotion', handleMotion, true);
function handleMotion(ev) {
const video = document.querySelector('video');
if (ev.acceleration.x > 10) {
video.playbackRate += 0.1; // Increase playback speed on shake
}
}
</script>In this code example, the playback speed of the video increases when the user shakes the device horizontally. However, it fails success criterion 2.5.4 because it does not provide an option to increase playback speed through standard controls or disable the motion control.
Code example that meets success criterion 2.5.4 (motion actuation)
Code Snippet
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
<button onclick="increasePlaybackRate()">Increase Speed</button>
<script>
const video = document.querySelector('video');
window.addEventListener('devicemotion', handleMotion, true);
function handleMotion(ev) {
if (ev.acceleration.x > 10) {
increasePlaybackRate();
}
}
function increasePlaybackRate() {
video.playbackRate += 0.1;
}
</script>In this updated version, there is both a motion-based control and a standard button control for increasing video playback speed. Also, users can disable the motion control by removing the event listener or setting video.playbackRate directly. This meets the requirements of success criterion 2.5.4.
Frequently Asked Questions
What is motion actuation in accessibility?
Motion actuation in accessibility allows users to control a website or app by moving the device or using gestures.
What are motion detection capabilities?
Motion detection capabilities allow devices to detect and respond to physical movements using sensors like accelerometers, gyroscopes, and cameras.
What does the motion detection setting help to reduce?
Disabling motion detection settings helps reduce accidental activations caused by unintentional movements or tremors,
How does success criterion 2.5.4 relate to other WCAG guidelines?
Motion Actuation relates to other guidelines ensuring users can interact with web content through multiple accessible methods. These include Pointer Gestures, Pointer Cancellation and Label in Name.
