2.5.4: Motion Actuation

Motion Actuation is a guideline under WCAG 2.1 that ensures functions triggered by device or user motion can also be operated through accessible means such as user interface components. This criterion aims to provide alternative methods for users who may not be able to perform certain motions, enhancing accessibility for individuals with disabilities..

Importance of 2.5.4: Motion Actuation Success Criterion

Ensuring that actions triggered by motion can also be performed through traditional interface components is crucial for accessibility. Many users with disabilities, including those with motor impairments or using assistive technologies, may struggle with motion-based interactions. By providing alternative methods, web developers can make their content more inclusive, improving usability and compliance with accessibility standards. This not only broadens the user base but also enhances the overall user experience by ensuring that all users can interact with web content effectively.

Primary Use Cases and Requirements Under Guideline 2.5.4: Motion Actuation (Level A)

Shaking the Device to Undo

Scenario: A user shakes their device to undo an action.

Implementation: Provide an on-screen undo button as an alternative.


<button onclick="undoAction()">Undo</button>
<script>
function undoAction() {
  alert("Action undone!");
}
</script>

Tilting the Device to Scroll

Scenario: A user tilts their device to scroll through content.

Implementation: Provide on-screen scroll buttons or traditional scrolling methods.


<div style="height: 200px; overflow-y: scroll;">
  <p>Scrollable content goes here...</p>
</div>

Moving the Device to Navigate

Scenario: A user moves their device to navigate through a map.

Implementation: Provide on-screen navigation controls.


<div id="map" style="width: 100%; height: 300px;"></div>
<div>
  <button onclick="panLeft()">Left</button>
  <button onclick="panRight()">Right</button>
  <button onclick="panUp()">Up</button>
  <button onclick="panDown()">Down</button>
</div>
<script>
function panLeft() {
  // Code to pan the map left
}

function panRight() {
  // Code to pan the map right
}

function panUp() {
  // Code to pan the map up
}

function panDown() {
  // Code to pan the map down
}
</script>

Rotating the Device to Change Orientation

Scenario: A user rotates their device to change the orientation of an object.

Implementation: Provide on-screen rotation controls.


<button onclick="rotateLeft()">Rotate Left</button>
<button onclick="rotateRight()">Rotate Right</button>
<div id="object" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
let rotation = 0;
function rotateLeft() {
  rotation -= 15;
  document.getElementById('object').style.transform = `rotate(${rotation}deg)`;
}

function rotateRight() {
  rotation += 15;
  document.getElementById('object').style.transform = `rotate(${rotation}deg)`;
}
</script>