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 of true.

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.

The distinction between a property and an attribute is important to this rule. While an attribute is a concrete construct that an author specifies in an HTML document, such as by writing <div aria-atomic="true">, a property is a conceptual construct built from ARIA attributes. A conforming user agent would assign an implicit aria-atomic property with a value of true and an aria-live property with a value to assertive to an element 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>