2.5.4 Motion Actuation

Level: A | Principle: Operable | Since: WCAG 2.1 | Automation: Manual

What This Means

Functionality triggered by device motion (shaking, tilting, or any movement detected by accelerometer/gyroscope) must also be operable through a conventional UI control (button, link, etc.). Users must also be able to disable the motion-triggered response to prevent accidental activation.

Who This Affects

Motor impairment users — may have involuntary tremors that trigger motion events or may be unable to perform the required motion
Wheelchair-mounted device users — device is fixed in position, making tilt/shake impossible
Users with devices on stands — cannot easily shake or tilt the device
Users prone to accidental motion — involuntary movements should not trigger unwanted actions

Common Pitfalls

1. Shake-to-undo with no button alternative

// Bad: shaking is the only way to undo
window.addEventListener('devicemotion', (e) => {
  if (isShake(e)) {
    undoLastAction();
  }
});
// No undo button exists anywhere on the page

2. Tilt-to-scroll with no fallback

A reading app that scrolls content by tilting the device with no scroll controls or standard scroll behavior.

3. No way to disable motion features

Even if a UI alternative exists, users must be able to turn off motion-triggered actions to prevent accidental activation.

4. Tilt-to-steer game controls in a non-game context

Using device tilt to navigate a product gallery or map with no touch/click alternative.

How to Fix

Always provide a UI alternative

// Motion-triggered undo
window.addEventListener('devicemotion', (e) => {
  if (settings.motionEnabled && isShake(e)) {
    undoLastAction();
  }
});

<!-- UI alternative: undo button always available -->
<button onclick="undoLastAction()" aria-label="Undo">
  Undo
</button>

Allow users to disable motion responses

<!-- Settings toggle to disable motion features -->
<label>
  <input
    type="checkbox"
    id="motion-toggle"
    checked
    onchange="toggleMotion(this.checked)"
  />
  Enable shake to undo
</label>

function toggleMotion(enabled) {
  settings.motionEnabled = enabled;
  localStorage.setItem('motionEnabled', enabled);
}

Common motion features and their alternatives

| Motion Feature | UI Alternative | |----------------|---------------| | Shake to undo | Undo button | | Tilt to scroll | Scroll bar / swipe | | Shake to refresh | Pull-to-refresh or refresh button | | Tilt to navigate | Arrow buttons or swipe | | Device rotation to change layout | Layout toggle button |

Exception

Motion actuation that is essential and no alternative can achieve the same result (e.g., a pedometer counting steps) is exempt.

How to Test

Identify every feature on the site that is triggered by device motion: shake-to-undo, tilt-to-scroll, shake-to-refresh, tilt-to-navigate.
For each motion-triggered feature, verify a UI-based alternative exists (a button, link, or menu option that performs the same action).
Check the site's settings for an option to disable motion-triggered responses entirely.
If the site has no motion features, verify this by searching the JavaScript source for devicemotion, deviceorientation, or accelerometer API calls.
Pass: Every motion-triggered feature has a UI alternative, and motion responses can be disabled in settings.
Fail: Any feature requires device motion with no button/UI alternative, or motion responses cannot be disabled.

axe-core Rules

| Rule | What It Checks | |------|---------------| | — | No automated axe-core rule for this criterion. Motion features require manual review. |