Motion Actuation

title: "Motion Actuation" weight: 14 description: "Learn WCAG SC 2.5.4 Motion Actuation: features activated by device motion (shake, tilt) must have a UI alternative, and users must be able to disable motion actuation to prevent accidental activation." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, mobile]

WCAG SC 2.5.4 Motion Actuation requires that functionality triggered by device motion (shaking, tilting, moving the device) can also be operated by UI components, and that motion actuation can be disabled to prevent accidental activation.

## What You'll Learn

You will understand motion actuation requirements, provide UI alternatives for motion-based controls, and implement motion actuation disable options.

## Why It Matters

Users with motor disabilities may not be able to shake or tilt their device deliberately. Users with involuntary movements may trigger motion actions accidentally. Providing alternatives ensures accessibility for both groups.

## Real-World Use

A step counter app uses a shake gesture to reset the daily count. A user with tremors accidentally resets their count multiple times per day. The app adds a reset button and a disable-shake option in settings.

## Motion Actuation Decisions

```mermaid
flowchart TD
  A[Motion Feature] --> B{Have UI alternative?}
  B -->|Yes| C{Can disable motion?}
  B -->|No| D[Add UI alternative]
  C -->|Yes| E[Accessible]
  C -->|No| F[Add disable option]
  D --> E
  F --> E

Implementing Motion Actuation

Always provide a visible UI control as an alternative to motion-based actions.

<!-- Button alternative to shake gesture -->
<div class="shuffle-controls">
  <button id="shuffle-btn" aria-label="Shuffle playlist">
    Shuffle
  </button>
</div>

<!-- Settings toggle for motion actuation -->
<div class="settings-group">
  <label>
    <input type="checkbox" id="disable-motion" checked>
    Enable shake to shuffle
  </label>
</div>

/* Motion preference respecting */
@media (prefers-reduced-motion) {
  .shake-indicator {
    display: none;
  }
}

.motion-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

// Motion actuation with accessibility alternatives
const disableMotion = document.getElementById('disable-motion');
const shuffleBtn = document.getElementById('shuffle-btn');

function shufflePlaylist() {
  // Shuffle logic
  console.log('Playlist shuffled');
}

// Button alternative (always works)
shuffleBtn.addEventListener('click', shufflePlaylist);

// Motion actuation (can be disabled)
if (window.DeviceMotionEvent) {
  let lastShake = 0;

  window.addEventListener('devicemotion', (event) => {
    if (disableMotion.checked) return;

    const acceleration = event.accelerationIncludingGravity;
    const magnitude = Math.sqrt(
      acceleration.x ** 2 +
      acceleration.y ** 2 +
      acceleration.z ** 2
    );

    // Detect shake (magnitude > 25 m/s^2)
    if (magnitude > 25) {
      const now = Date.now();
      if (now - lastShake > 2000) {
        lastShake = now;
        shufflePlaylist();
      }
    }
  });
}

Common Mistakes

• Using motion as the only way to activate a feature
• Not providing a disable option for motion actuation
• Making motion sensitivity too high (accidental triggers)
• Not testing with users who have motor disabilities
• Ignoring the reduced-motion accessibility setting
• Using motion for essential functionality
• Not providing visual feedback when motion is detected

Practice and Challenge

Practice 1: Identify any motion-activated features in your app. Practice 2: Add a UI alternative for a shake-based action. Practice 3: Implement a disable-motion toggle in settings. Practice 4: Test with prefers-reduced-motion enabled. Practice 5: Adjust motion sensitivity to prevent accidental triggers.

Challenge: Design a motion-actuated feature (shake to undo, tilt to scroll) with full accessibility support. Include: a UI button alternative, a toggle to disable motion actuation, respect for prefers-reduced-motion, configurable sensitivity, and visual feedback when motion is detected.

FAQ

Mini Project

Create a motion actuation demo page with three features: shake to reset, tilt to scroll, and flip to toggle. For each, implement a UI button alternative, a disable toggle, reduced-motion support, and visual feedback. Test all features with motion enabled and disabled.

What's Next

Screen Size Adaptation covers content adaptation for different screen sizes.