| id | 7677a9 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| name | Device motion based changes to the content can also be created from the user interface | ||||||||||
| rules_format | 1.1 | ||||||||||
| rule_type | atomic | ||||||||||
| description | This rule checks that changes to the content of a web page that result from device motion events can also be caused by user interface components. | ||||||||||
| accessibility_requirements |
|
||||||||||
| input_aspects |
|
||||||||||
| acknowledgments |
|
||||||||||
| htmlHintIgnore |
|
This rule applies to any HTML document with an associated Window object that has an event listener list with one or more event listeners for device orientation events or device motion events.
For each registered device orientation event or device motion event in the test target at least one of the following is true:
- no changes: The registered event does not cause changes to the content of the web page; or
- same result: There is at least one set of instruments, where each instrument is in the same web page of the registered event or can be found in a clearly labeled location from that web page, causing the same changes in content as the event.
The instruments used to pass this rule (if any), must meet all level A Success Criteria in order to fully satisfy Success Criterion 2.5.4: Motion Actuation. These extra requirements are left out of this rule, and should be tested separately.
- The motion to operate the device is not used through an accessibility supported interface, which is listed as a valid exception to Success Criterion 2.5.4: Motion Actuation.
- The motion is not essential for the functionality it triggers, which is listed as a valid exception to Success Criterion 2.5.4: Motion Actuation.
- This rule assumes that there are no changes in the content of the web page caused by another event. If this is not the case, changes may be attributed to the wrong event and the rule may fail while Success Criterion 2.5.4: Motion Actuation is still satisfied.
- This rule assumes that the changes happen within a 1 minute time span after the event firing and therefore the comparison between the page before and after the event firing can be made at any time after that time span elapses. If there are changes after this time span, they may not be detected as changes in content and the rule may pass but Success Criterion 2.5.4: Motion Actuation is not satisfied. The arbitrary 1 minute time span, selected so that testing this rule would not be impractical, is not included in WCAG.
There are no accessibility support issues known.
- Understanding Success Criterion 2.5.4: Motion Actuation
- G213: Provide conventional controls and an application setting for motion activated input
- DeviceOrientation Event Specification
This HTML document has device orientation events that cause no changes to the content of the web page.
<html>
<head>
<title>Passed Example 1</title>
<script>
function activateEvent() {
let counter = 0
window.addEventListener('deviceorientation', () => {
counter++
})
}
</script>
</head>
<body onload="activateEvent();">
<p>ACT-R</p>
<p>Note: This example may not work across all browsers.</p>
</body>
</html>This HTML document that can be operated through the device's orientation to increase and decrease the value of a slider has the same result available through button elements.
<html>
<head>
<title>Passed Example 2</title>
<script src="/test-assets/7677a9/slider.js"></script>
<script>
function activateSlider() {
document.getElementById('decreaseSlider').addEventListener('click', decreaseSlider)
document.getElementById('increaseSlider').addEventListener('click', increaseSlider)
window.addEventListener('deviceorientation', handleOrientation)
}
</script>
</head>
<body onload="activateSlider();">
<pre class="output"></pre>
<h1>Slider Motion Sensor Example</h1>
<p>
Open this slider on a device with a motion sensor, such as a smart phone or tablet. Tilt the device to the right
and left to adjust the slider value. The decrease and increase buttons also adjust the value.
</p>
<p>Note: This example may not work across all browsers.</p>
<div>
<button id="decreaseSlider" type="button">Decrease Value</button>
<input type="range" min="1" max="100" value="50" id="motionSlider" disabled />
<button id="increaseSlider" type="button">Increase Value</button>
<p aria-live="polite">Slider Value: <span id="output">50</span></p>
</div>
</body>
</html>This HTML document that can be operated by rotating the device to increase and decrease the value of a slider has the same result available through button elements.
<html>
<head>
<title>Passed Example 3</title>
<script src="/test-assets/7677a9/slider.js"></script>
<script>
function activateSlider() {
document.getElementById('decreaseSlider').addEventListener('click', decreaseSlider)
document.getElementById('increaseSlider').addEventListener('click', increaseSlider)
window.addEventListener('devicemotion', handleMotion)
}
</script>
</head>
<body onload="activateSlider();">
<pre class="output"></pre>
<h1>Slider Motion Sensor Example</h1>
<p>
Open this slider on a device with a motion sensor, such as a smart phone or tablet. Rotate the device to adjust
the slider value. The decrease and increase buttons also adjust the value.
</p>
<p>Note: This example may not work across all browsers.</p>
<div>
<button id="decreaseSlider" type="button">Decrease Value</button>
<input type="range" min="1" max="100" value="50" id="motionSlider" disabled />
<button id="increaseSlider" type="button">Increase Value</button>
<p aria-live="polite">Slider Value: <span id="output">50</span></p>
</div>
</body>
</html>This HTML document can be operated by rotating the device to increase and decrease the value of a slider and the location of an instrument to support the same results is clearly available.
<html>
<head>
<title>Passed Example 4</title>
<script src="/test-assets/7677a9/slider.js"></script>
<script>
function activateSlider() {
document.getElementById('decreaseSlider').addEventListener('click', decreaseSlider)
document.getElementById('increaseSlider').addEventListener('click', increaseSlider)
window.addEventListener('devicemotion', handleMotion)
}
function openModal() {
document.getElementById('overlay').style.display = 'block'
}
function closeModal() {
document.getElementById('overlay').style.display = 'none'
}
</script>
</head>
<body onload="activateSlider();">
<pre class="output"></pre>
<h1>Slider Motion Sensor Example</h1>
<p>
Open this slider on a device with a motion sensor, such as a smart phone or tablet. Rotate the device to adjust
the slider value. Activate the control panel to access decrease and increase buttons that also adjust the value.
</p>
<input type="button" onclick="openModal()" value="Control panel" />
<p>Note: This example may not work across all browsers.</p>
<input type="range" min="1" max="100" value="50" id="motionSlider" disabled />
<p aria-live="polite">Slider Value: <span id="output">50</span></p>
<div
style="
display: none;
position: fixed;
top: 17em;
left: 1em;
background-color: #505050;
color: white;
padding: 0.5em;
"
id="overlay"
>
<button id="decreaseSlider" type="button">Decrease Value</button>
<button id="increaseSlider" type="button">Increase Value</button>
<button onclick="closeModal();">Dismiss</button>
</div>
</body>
</html>This HTML document that can be operated through the device's orientation to increase and decrease the value of a slider has not other way to achieve the same result.
<html>
<head>
<title>Failed Example 1</title>
<script src="/test-assets/7677a9/slider.js"></script>
<script>
function activateSlider() {
window.addEventListener('deviceorientation', handleOrientation)
}
</script>
</head>
<body onload="activateSlider();">
<pre class="output"></pre>
<h1>Slider Motion Sensor Example</h1>
<p>
Open this slider on a device with a motion sensor, such as a smart phone or tablet. Tilt the device to the right
and left to adjust the slider value.
</p>
<p>Note: This example may not work across all browsers.</p>
<div>
<input type="range" min="1" max="100" value="50" id="motionSlider" disabled />
<button id="increaseSlider" type="button">Increase Value</button>
<p aria-live="polite">Slider Value: <span id="output">50</span></p>
</div>
</body>
</html>This HTML document is not operable by device motion.
<p>ACT-Rules</p>