Provide Alternatives to Motion Actuation and Allow Disabling It

Disabilities Affected: Mobility

Success Criterion: 2.5.4

Level: A

Functionality that can be operated by device motion (like tilting, shaking) or user motion (like waving at a camera) must also be operable by user interface components (like buttons), and the motion actuation can be disabled to prevent accidental triggering, except when:

Supported Interface: The motion is used to operate functionality through an accessibility-supported interface (e.g., platform accessibility services for switch control via head movement).
Essential: The motion is essential for the function (e.g., a step counter that relies on detecting shaking).

Why It Matters

Relying solely on device or user motion for control excludes users who cannot perform these motions accurately or at all (e.g., someone with tremors, someone whose device is mounted). Accidental activation can also be problematic. Providing button-based alternatives and a way to disable motion sensing ensures operability for more users.

Fixing the Issue

If using motion sensors (accelerometer, gyroscope) or camera input to trigger actions:

Provide equivalent on-screen controls (buttons, links) that achieve the same function.
Provide a setting or mechanism to disable the motion-based activation to prevent accidental triggering. Ensure the alternative controls are keyboard accessible.

Good Code Example

(Conceptual) Providing button alternatives for a shake-to-undo feature:

Markup

<button id="undo-button">Undo Last Action</button>
<p>You can also shake your device to undo.</p>
<label>
  <input type="checkbox" id="disable-shake" onchange="toggleShakeFeature(this.checked)"> Disable shake to undo
</label>

<script>
  let shakeEnabled = true;

  function toggleShakeFeature(isDisabled) {
     shakeEnabled = !isDisabled;
     console.log("Shake feature is now:", shakeEnabled ? "Enabled" : "Disabled");
  }

  function performUndo() {
     console.log("Performing Undo action...");
  }

  // Button triggers undo directly
  document.getElementById('undo-button').addEventListener('click', performUndo);

  // Listen for device motion (simplified example)
  // window.addEventListener('devicemotion', function(event) {
  //   if (!shakeEnabled) return;
  //   // Complex logic to detect a 'shake' gesture
  //   let acceleration = event.accelerationIncludingGravity;
  //   let shakeThreshold = 15; // Example threshold
  //   if (Math.abs(acceleration.x) > shakeThreshold ||
  //       Math.abs(acceleration.y) > shakeThreshold ||
  //       Math.abs(acceleration.z) > shakeThreshold) {
  //      console.log('Shake detected!');
  //      performUndo();
  //      // Add debouncing/throttling to prevent multiple triggers
  //   }
  // });
</script>

Bad Code Example

Feature relies only on tilting the device:

Markup

<canvas id="game-canvas"></canvas>
<script>
  // Game logic only uses device orientation events for control.
  // window.addEventListener('deviceorientation', handleOrientation);
  // No on-screen buttons or keyboard controls are provided for steering.
  // Fails WCAG 2.5.4 if steering isn't essential or supported via accessibility API.
</script>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult