WCAG 2.2 Demo Suite

2.5.4 Level A Guideline 2.5 Input Modalities Added in WCAG 2.1 Not detectable automatically

Motion Actuation

Functionality operated by device motion or user motion can also be operated by interface components, and motion actuation can be disabled.

Who this affects

Users whose device is mounted to a wheelchair and cannot be shaken. Users with tremor who trigger motion actions unintentionally.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.5.4

Open the failing example in a new tab

fail.html — the problem

<h1>Random book picker</h1>

<!-- FAILURE: shaking the device is the ONLY way to get a new suggestion, and
     there is no way to switch motion detection off.

     Who this excludes: anyone whose device is mounted to a wheelchair, a desk
     stand or a mobility aid and physically cannot be shaken; anyone without
     the grip strength or arm movement to shake a phone; and every desktop
     user, whose machine has no accelerometer at all.

     Users with tremor have the opposite problem - they trigger it constantly
     and cannot turn it off. -->
<p>Shake your phone to get a random recommendation.</p>
<p id="pick" role="status">Shake to begin.</p>

Meets 2.5.4

Open the passing example in a new tab

pass.html — the fix

<h1>Random book picker</h1>

<!-- FIX 1: a conventional control does the same job. It works on every device,
     with a keyboard, a switch, or a voice command. -->
<p>
  <button type="button" class="button" id="pickBtn">Suggest a book</button>
</p>

<!-- FIX 2: motion actuation is available as an extra, and can be switched off.
     Note it is off by DEFAULT here: motion triggering surprises people, and
     opt-in is kinder than opt-out for a feature that fires accidentally. -->
<p class="field">
  <input type="checkbox" id="shake">
  <label for="shake">Also let me shake the device to get a suggestion</label>
</p>

<p id="pick" role="status">No suggestion yet.</p>

<!-- The exception: motion actuation may be the only mechanism where the motion
     is ESSENTIAL to the function - a pedometer, or an app that measures how
     level a surface is. "It felt fun in the design review" is not essential. -->

How to test it

Find features triggered by shaking or tilting. Confirm a conventional control does the same job and that motion triggering can be switched off.

  • Automated

    Requires identifying motion event listeners and testing on a device.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification