WCAG 2.5.4: How to Fix Motion-activated Functionality Issues

What This Criterion Requires

WCAG 2.5.4 requires that functionality that can be operated by device motion or user motion can also be operated by user interface components, and the ability to respond to motion can be disabled to prevent accidental actuation, unless the motion is used to operate functionality through an accessibility-supported interface, or the motion is essential for the function and not doing so would invalidate the activity. Device motion includes tilting, shaking, or rotating a device, while user motion includes gestures detected by a camera. This criterion was added in WCAG 2.1 to address the growing use of motion sensors in mobile web applications. Examples include shaking a phone to undo an action, tilting to scroll or navigate, or using the device orientation to control a game. For each motion-triggered function, a conventional user interface control (button, link, etc.) must be available as an alternative. Additionally, users must be able to disable motion responses entirely to prevent accidental activation caused by tremors, involuntary movements, or mounting a device on a wheelchair or other assistive equipment.

Why It Matters

Users with motor disabilities may be unable to perform device motion gestures due to limited range of motion, weakness, or physical inability to hold and move a device. Users who have their devices mounted to wheelchairs, bed frames, or assistive equipment cannot tilt or shake the device at all. Users with tremors or involuntary movements may constantly trigger motion-based functions accidentally, creating a frustrating and unusable experience. Users with certain conditions that affect balance or movement may find motion-based interactions disorienting or physically uncomfortable. Even users without disabilities may encounter situations where motion input is impractical, such as when using a device on a moving train or bus where the device is naturally in motion. By requiring both an alternative conventional control and the ability to disable motion responses, this criterion ensures that motion-based features enhance the experience for some users without excluding or disrupting others.

Common Failures and How to Fix Them

<script>
  window.addEventListener('devicemotion', function(event) {
    if (isShakeGesture(event)) {
      undoLastAction();
    }
  });
  // No alternative undo mechanism provided
</script>

<button onclick="undoLastAction()" aria-label="Undo last action">Undo</button>
<script>
  let motionEnabled = true;

  window.addEventListener('devicemotion', function(event) {
    if (motionEnabled && isShakeGesture(event)) {
      undoLastAction();
    }
  });

  function toggleMotion() {
    motionEnabled = !motionEnabled;
  }
</script>
<label>
  <input type="checkbox" checked onchange="toggleMotion()">
  Enable shake to undo
</label>

<script>
  window.addEventListener('deviceorientation', function(event) {
    const tilt = event.beta;
    if (tilt > 10) window.scrollBy(0, 5);
    if (tilt < -10) window.scrollBy(0, -5);
  });
  // No way to disable tilt-to-scroll
</script>

<script>
  let tiltScrollEnabled = false; // Disabled by default

  window.addEventListener('deviceorientation', function(event) {
    if (!tiltScrollEnabled) return;
    const tilt = event.beta;
    if (tilt > 10) window.scrollBy(0, 5);
    if (tilt < -10) window.scrollBy(0, -5);
  });
</script>
<div class="settings">
  <label>
    <input type="checkbox" onchange="tiltScrollEnabled = this.checked">
    Enable tilt to scroll
  </label>
</div>

How to Test

1. Identify all functionality on the page that responds to device motion (tilt, shake, rotation) or user motion (camera-based gestures) by searching for devicemotion and deviceorientation event listeners in the code.
2. For each motion-triggered function, verify that an equivalent conventional UI control (button, link, menu option) is available to perform the same action.
3. Verify that a setting or control exists to disable motion-based interactions entirely, preventing accidental activation.
4. Test the page on a device that is stationary (placed on a desk or mounted) and verify that all functionality can be accessed without any device movement.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Nextjs Accessibility Checklist
• Webflow Accessibility Checklist

Further Reading

• Wcag Explained Plain English
• Keyboard Navigation Testing

Related WCAG Criteria

• WCAG 2.5.1
• WCAG 2.5.2
• WCAG 2.1.1