Shake and tilt controls under the ADA

When shaking or tilting is the only way in

Some features respond to the device being shaken, tilted or moved, or to the user's own movement picked up by a camera, such as a hand wave. WCAG 2.1 success criterion 2.5.4 says that anything operated by device motion or user motion must also be operable through regular interface components (a button, a toggle), and the motion response must be possible to turn off so it cannot trigger by accident.

Two exceptions exist. One is when the motion works through an accessibility-supported interface, such as a platform feature that an assistive technology provides. The other is when the motion is essential and removing it would invalidate the activity, as with a step counter. The criterion does not cover motion used for other things like location, aiming a camera at a QR code, or typing and touching the screen.

Who needs the alternative

• People whose phone is clamped to a wheelchair or desk and cannot be shaken or tilted.
• People with tremor or involuntary movement, for whom motion triggers fire unexpectedly.
• People who cannot perform a hand gesture in front of a camera.

Where it shows up in public services (ADA angle)

Typical cases are a "shake to undo" in a form app, a transit app that refreshes arrivals when the phone is shaken, a kiosk or video-visit app that answers on a wave, or an inspection app that scrolls a checklist by tilting. A resident who cannot make that motion is shut out of the feature, and one who makes it accidentally can lose their entered data. Native apps are in scope under the Title II rule (see mobile apps).

Web examples: undo, refresh, tilt scrolling

Shake to clear a benefits application

window.addEventListener("devicemotion", e => {
  const a = e.accelerationIncludingGravity;
  if (Math.abs(a.x) > 25) clearApplication();   // only way to clear
});

<button type="button" id="clear-app">Clear application</button>
<label><input type="checkbox" id="shake-on"> Allow shake to clear</label>
<script>
  const clearBtn = document.getElementById("clear-app");
  clearBtn.addEventListener("click", clearApplication);
  window.addEventListener("devicemotion", e => {
    if (!document.getElementById("shake-on").checked) return;
    if (Math.abs(e.accelerationIncludingGravity.x) > 25) clearApplication();
  });
</script>

Refresh bus arrivals by shaking

window.addEventListener("devicemotion", shakeDetected => reloadArrivals());

<button type="button" id="refresh">Refresh arrivals</button>
<script>
  document.getElementById("refresh").addEventListener("click", reloadArrivals);
  if (!userPrefs.motionDisabled) {
    window.addEventListener("devicemotion", onShake);   // optional shortcut
  }
</script>

Tilt to scroll a long inspection checklist

window.addEventListener("deviceorientation", e => {
  checklist.scrollBy(0, e.beta * 2);
});

<button type="button" id="up">Scroll up</button>
<button type="button" id="down">Scroll down</button>
<script>
  up.onclick = () => checklist.scrollBy(0, -120);
  down.onclick = () => checklist.scrollBy(0, 120);
  // Tilt scrolling, if kept, sits behind the same setting that disables motion.
</script>

Mobile examples: SwiftUI and Jetpack Compose

Both platforms hand you raw motion events, so the alternative and the off switch are your job.

// SwiftUI
.onReceive(NotificationCenter.default.publisher(for: .deviceDidShake)) { _ in
  draft = ""          // custom notification, posted from a UIWindow motionEnded override
}

// SwiftUI
// Custom name your app defines; post it from a UIWindow motionEnded override
extension Notification.Name { static let deviceDidShake = Notification.Name("deviceDidShake") }

@AppStorage("shakeToClear") private var shakeToClear = true

Button("Clear draft") { draft = "" }
Toggle("Shake to clear", isOn: $shakeToClear)
  .onReceive(NotificationCenter.default.publisher(for: .deviceDidShake)) { _ in
    if shakeToClear { draft = "" }
  }

// Jetpack Compose
DisposableEffect(Unit) {
  sensorManager.registerListener(shakeListener, accelerometer, SENSOR_DELAY_UI)
  onDispose { sensorManager.unregisterListener(shakeListener) }
}

// Jetpack Compose
Button(onClick = { clearDraft() }) { Text("Clear draft") }
Switch(checked = shakeEnabled, onCheckedChange = { shakeEnabled = it })

if (shakeEnabled) {
  DisposableEffect(Unit) {
    sensorManager.registerListener(shakeListener, accelerometer, SENSOR_DELAY_UI)
    onDispose { sensorManager.unregisterListener(shakeListener) }
  }
}

Checking motion features

1. List every feature that responds to shaking, tilting, rotating or a body or hand gesture. Ask the product team too; this is often undocumented.
2. For each one, find the on-screen control that does the same job. If there is none, it fails.
3. Look for the setting that turns the motion response off. Confirm it holds after restarting the app.
4. Hold the device very still on a stand (or use a desktop browser with no motion sensor) and complete the task using only controls.
5. Tools cannot see motion handlers working. Reading the source for devicemotion, deviceorientation, motionEnded and sensor listeners is the practical check.

Mistakes seen in the field

• Adding a Clear button but leaving the shake response on with no way to disable it.
• Burying the off switch deep in system settings the app cannot reach.
• Treating a camera-based gesture as outside the criterion; the criterion covers user motion too.
• Applying the exception to a feature that is only convenient, not one that would be invalidated.

Ship it when

• Every motion-triggered feature has a visible button or toggle that does the same thing.
• The motion response can be switched off, and the choice persists.
• Any motion left without an alternative is essential, and you can say why.

Sources

• Understanding SC 2.5.4: Motion Actuation (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.