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 for which all the following are true:

the element is included in the accessibility tree; and
the element has an aria-live property with a value of assertive; and
the element has at least one element descendant.

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

None of these elements are 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>

This form has an error area to display error messages; the area is assertive but initially empty. Once filled, the full content is changed and the message is read in full, providing the required context about the error.

<div id="errors" role="alert" aria-atomic="false" aria-live="assertive">
</div>
<p>
    <label for="first">First Name (required)</label><br />
    <input type="text" name="first" id="first" />
</p>
<div>
    <button onclick="check('first');">Submit</button>
</div>

<script>
    function check(field) {
        const input = document.getElementById(field);
        const error = document.getElementById(`errors`);
        if (input.value === "") {
            error.innerHTML = `<span>Please enter your ${field} name.</span>`;
        } else {
            error.innerText = "";
        }
    }
</script>