SIA-R54Assertive live region is marked as atomic
Accessibility requirements
This rule tests conformance of the following accessibility requirements:
Description
This rule checks that each assertive live region (aria-live="assertive"
) is marked as atomic (aria-atomic="true"
).
Applicability
This rule applies to every element which is included in the accessibility tree and has an aria-live
property with a value of assertive
.
Expectations
- The element has an
aria-atomic
property with a value oftrue
.
Assumptions
This rule makes the following assumption:
- Assertive live regions are used for presenting input errors to the user. If assertive live regions are used for other purposes than presenting errors, failing this rule will not fail 3.3.1 Error Identification but will still fail 4.1.3 Status Messages.
Accessibility support
This rule has the following accessibility support concerns:
- There exists a known combination of operating system and assistive technology that does not correctly assign implicit properties to elements with a semantic role of
alert
.
Examples
Passed
This form has an error area to display error messages; this area is both assertive and atomic.
<div id="errors" role="alert" aria-atomic="true" aria-live="assertive">
<p id="first-error"></p>
<p id="last-error"></p>
</div>
<p>
<label for="first">First Name (required)</label><br />
<input type="text" name="first" id="first" />
</p>
<p>
<label for="last">Last Name (required)</label><br />
<input type="text" name="last" id="last" />
</p>
<div>
<button onclick="check('first'); check('last');">Submit</button>
</div>
<script>
function check(field) {
const input = document.getElementById(field);
const error = document.getElementById(`${field}-error`);
if (input.value === "") {
error.innerHTML = `<span>Please enter your ${field} name.</span>`;
} else {
error.innerText = "";
}
}
</script>
Failed
This form has an error area to display error messages; this area is assertive but not atomic.
<div id="errors" role="alert" aria-atomic="false" aria-live="assertive">
<p id="first-error"></p>
<p id="last-error"></p>
</div>
<p>
<label for="first">First Name (required)</label><br />
<input type="text" name="first" id="first" />
</p>
<p>
<label for="last">Last Name (required)</label><br />
<input type="text" name="last" id="last" />
</p>
<div>
<button onclick="check('first'); check('last');">Submit</button>
</div>
<script>
function check(field) {
const input = document.getElementById(field);
const error = document.getElementById(`${field}-error`);
if (input.value === "") {
error.innerHTML = `<span>Please enter your ${field} name.</span>`;
} else {
error.innerText = "";
}
}
</script>
Inapplicable
This timer is not assertive.
<p>You've been here for <span id="timer"></span> seconds</p>
<script>
const timer = document.getElementById("timer");
let seconds = 0;
setInterval(function () {
timer.innerHTML = seconds++;
}, 1000);
</script>