| id | c249d5 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| name | Device motion based changes to the content can be disabled | ||||||||||
| rules_format | 1.1 | ||||||||||
| rule_type | atomic | ||||||||||
| description | This rule checks that it is possible to disable any changes to the content of the web page resulting from device motion based events. | ||||||||||
| accessibility_requirements |
|
||||||||||
| input_aspects |
|
||||||||||
| acknowledgments |
|
||||||||||
| htmlHintIgnore |
|
This rule applies to an 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 within a 1 minute time span of the event firing; or
- disabled: There is at least one set of clearly labeled instruments to block the event[] for at least 1 minute.
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.
- The event listeners listening to device motion events trigger a functionality in the web page. If they do not trigger any such functionality failing this rule might not be a failure of the success criterion.
- If there are ways to disable the device motion based functionality that do not require the user to interact with the web page (e.g. a setting at the operating system level), failing this rule might not be a failure of the success criterion.
- 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.
- After being disabled, the event remains disabled until being re-enabled again. If the event is re-enabled through other non-user controlled means (e.g. a timeout) then this rule may pass while Success Criterion 2.5.4: Motion Actuation is not satisfied.
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 a control to disable that functionality.
<html>
<head>
<title>Passed Example 2</title>
<script src="/test-assets/7677a9/slider.js"></script>
<script>
function activateSlider() {
window.addEventListener('deviceorientation', handleOrientationCanBeDisabled)
}
</script>
</head>
<body onload="activateSlider();">
<h1>Slider Motion Sensor Example</h1>
<p>
Open this slider on a device with a motion sensor, such as a smartphone or tablet. Tilt the device to the right
and left to adjust the slider value. The check box disables the motion sensing adjustment.
</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 />
<p aria-live="polite">Slider Value: <span id="output">50</span></p>
</div>
<div>
<input type="checkbox" id="disableMotion" />
<label for="disableMotion">Disable Motion Actuation</label>
</div>
</body>
</html>This HTML document that can be operated by rotating the device to increase and decrease the value of a slider has a control to disable that functionality.
<html>
<head>
<title>Passed Example 3</title>
<script src="/test-assets/7677a9/slider.js"></script>
<script>
function activateSlider() {
window.addEventListener('devicemotion', handleMotionCanBeDisabled)
}
</script>
</head>
<body onload="activateSlider();">
<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 check box disables the motion sensing adjustment.
</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 />
<p aria-live="polite">Slider Value: <span id="output">50</span></p>
</div>
<div>
<input type="checkbox" id="disableMotion" />
<label for="disableMotion">Disable Motion Actuation</label>
</div>
</body>
</html>This HTML document that can be operated through the device's orientation to increase and decrease the value of a slider but has no way to disable this functionality.
<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 smartphone 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>