WCAG 2.5.4 — Motion Actuation

What this requires

Functionality operated by device motion or user motion can also be operated by user interface components, and motion actuation can be disabled to prevent accidental activation. The criterion covers shake gestures, tilt-to-scroll, flip-to-mute, and similar interactions. Exceptions: motion-based input used to operate an accessibility feature, or motion that is essential for the function.

How AI coding tools fail this

When asked to add "shake to undo" or "tilt to navigate", AI tools wire up the device-motion APIs (DeviceOrientationEvent, DeviceMotionEvent) and consider the feature complete. No UI control is exposed; users who can't shake — wheelchair mounts, hand tremor, fixed-orientation setups — can't use the feature.

The second pattern: motion gestures with no disable setting. Users with involuntary movement constantly trigger the action and can't turn it off.

The third: web-app installs that ask for motion permissions on load without explaining what the motion is for. The user grants, the feature works, and they never use it intentionally.

Failing examples

Shake-to-undo with no button alternative:

useEffect(() => {
  const onShake = (e: DeviceMotionEvent) => {
    if (isShakeGesture(e)) undoLastAction();
  };
  window.addEventListener("devicemotion", onShake);
  return () => window.removeEventListener("devicemotion", onShake);
}, []);

Passing examples

Pair the motion gesture with a UI control and a disable toggle:

function useShakeToUndo() {
  const { motionShortcutEnabled } = usePreferences();
  useEffect(() => {
    if (!motionShortcutEnabled) return;
    const onShake = (e: DeviceMotionEvent) => {
      if (isShakeGesture(e)) undoLastAction();
    };
    window.addEventListener("devicemotion", onShake);
    return () => window.removeEventListener("devicemotion", onShake);
  }, [motionShortcutEnabled]);
}

// Always available regardless of motion preference:
<button onClick={undoLastAction} aria-label="Undo last action">
  <UndoIcon aria-hidden="true" />
</button>

// In settings:
<label>
  <input
    type="checkbox"
    checked={motionShortcutEnabled}
    onChange={(e) => setPref("motionShortcutEnabled", e.target.checked)}
  />
  Shake device to undo
</label>

Edge cases

Essential motion is exempt — a pedometer that counts steps has to read motion.
Accessibility-feature motion is also exempt (e.g. tilting a device to scroll a long article when the user can't operate a screen).
Permission UI for DeviceMotionEvent is browser-mediated on iOS; design the request flow with a clear rationale.
Drag-to-refresh is touch-based, not device-motion. It falls under 2.5.7.
Mobile-only features still need a UI alternative — assume some users are running the same app on a desktop or assistive setup.

How Jeikin handles this

The scanner flags listeners on devicemotion, deviceorientation, and similar APIs and asks the reviewer to confirm a UI alternative and a disable setting exist. The dashboard records the alternative path and the setting location.

References

W3C — Understanding 2.5.4 Motion Actuation (opens in new tab)