On each web page, can features that involve a movement of the device or toward the device also be performed in an alternative way (except in special cases)?

A user holds their phone fixed to their wheelchair, or essential tremors prevent them from controlling the device's movement with precision. If your application triggers actions via the accelerometer or gyroscope, this user is locked out. No escape hatch: access blocked.

This criterion covers two families of detection. Device motion itself: tilting, shaking, rotating the phone. Gestures directed at the device: detecting a hand approaching via a proximity sensor or camera, without touching the screen. In both cases, every functionality triggered this way must have an alternative via a standard interface component — button, link, or form field.

Test 13.12.3 goes further. Even when an alternative exists, someone suffering from spasms may trigger the functionality through involuntary motion. Motion detection must therefore be directly disableable from the interface. Once disabled, it must trigger nothing.

In practice: search your JavaScript for devicemotion and deviceorientation listeners. Each must be paired with a visible interactive component, and the whole must be switchable by the user without leaving the page.

3 tests to confirm that an alternative to device motion is offered

Examples

<script>
  window.addEventListener('devicemotion', function(event) {
    var acc = event.accelerationIncludingGravity;
    if (Math.abs(acc.x) > 15 || Math.abs(acc.y) > 15) {
      undoLastAction();
    }
  });
</script>

<button type="button" id="btn-undo">Undo last action</button>
 
<label>
  <input type="checkbox" id="toggle-shake" checked>
  Enable « shake to undo » gesture
</label>
 
<script>
  var shakeEnabled = true;
 
  document.getElementById('toggle-shake').addEventListener('change', function(e) {
    shakeEnabled = e.target.checked;
  });
 
  window.addEventListener('devicemotion', function(event) {
    if (!shakeEnabled) return;
    var acc = event.accelerationIncludingGravity;
    if (Math.abs(acc.x) > 15 || Math.abs(acc.y) > 15) {
      undoLastAction();
    }
  });
 
  document.getElementById('btn-undo').addEventListener('click', function() {
    undoLastAction();
  });
</script>

Tips and pitfalls

Frequently asked questions

References