Draft Stateful New Rule: Status Messages are Announced to User

[tbostic32]

The task force is currently drafting up changes that may be made in the next version of the ACT format. The rule below shows some examples of new features we have discussed including in the new format as a way to begin discussions. For this rule, the main discussion points are given below:

• Inclusion of JavaScript as an input aspect: have we done this before? Is there a standard input aspect name we have used for it? Should we be broader and include any client side scripting that runs in a browser (even though they are entirely unsupported?)
• Creation and use of a subjective section in the Applicability called Exceptions which states cases in which the objective part of the applicability may be ignored.
• Introduction of Where-After language to implicitly handle state management. The standard format for the applicability in the stateful rules we have drafted is Applicability: For each <elements that will become the test targets>, where <element condition is met> after <action taken by tester>.
• Term for generally making an action on the page - [activation]. Activation is meant to show that some action was taken to alter the state of the page without being prescriptive for how the action (or steps of actions) are designed. We will need to create an agreed upon definition of activation for use in all stateful rules.
• Addition of action hooks for examples so that automated tools can trigger actions without needing to understand/automatically explore the page. In the examples below, we define a custom event called acttfNextAction that should be called on the document element until it returns false. Some sample code for a 2 step example is included below (I unrolled the loop, in actuality you would loop until it returns false).

let event = new Event('acttfNextAction', {cancelable: true}); // Cancelable required
document.dispatchEvent(event); // Step 1: Fills out form, returns true
document.dispatchEvent(event); // Step 2: Submits form, returns true
document.dispatchEvent(event); // Step 3: Nothing left, returns false

See https://github.com/act-rules/act-rules.github.io/issues/1953 for the discussion leading up to this example rule.

id: name: Status Messages are Announced to User rule_type: atomic description: | This rule checks that status messages use a live region role or aria-live to notify users. accessibility_requirements: # Remove whatever is not applicable wcag20:4.1.3: # <Name of Success Criterion> (A | AA | AAA) forConformance: true failed: not satisfied passed: further testing needed inapplicable: further testing needed aria12:live_region_roles: # <Heading in WAI-ARIA> title: 5.3.5 Live Region Roles forConformance: false failed: not satisfied passed: further testing needed inapplicable: further testing needed input_aspects:

• DOM Tree
• CSS Styling
• JavaScript acknowledgments: authors:
  • Trevor Bostic
  • Wilco Fiers

---

Applicability

For each [HTML element] containing [visible text], where this text appeared after the [activation] of an [HTML element] with one of the following roles:

• button,
• checkbox,
• combobox,
• listbox,
• menuitemcheckbox,
• menuitemradio,
• radio,
• searchbox,
• slider,
• spinbutton,
• switch or
• textbox

Exceptions (NEW SECTION! SEE COMMENTS ABOVE)

• Not a Status Message: The text does not provide information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors.
• Text Receives Focus: A change of context occurs so that the newly [visible text] is focused.

Expectation

Each test target must meet one of the following criteria:

• The element has a live region role that is either alert, status, log, or timer.
• The element has an aria-live attribute where the value is either polite or assertive

Assumptions

There are no assumptions.

Accessibility Support

There are no accessibility support issues known.

Background

The list of applicable semantic roles is derived by taking all the ARIA 1.1 roles that:

• inherit from the abstract input or select role, and
• do not have a required context role that inherits from the abstract input or select role.

The Exceptions in the applicability are derived from the WCAG 2.1. definition of status messages

Test Cases

Passed

Passed Example 1

A success status message becomes visible after successfully completing the form. The status message is available to AT through the use of role=status.

<html lang="en">
  <head></head>
  <body>
    <form id="example_form">
      <label for="username">Username</label>
      <input type="text" id="username"/>
      <input type="submit" id="submit"/>
    </form>
    <p role="status" id="submit_message"></p>
    <script>
      // Handler for sending success notification
      let form = document.querySelector('#example_form');
      let username = document.querySelector('#username');
      let submit = document.querySelector('#submit');
      let alert = document.querySelector('#submit_message');
  
      form.addEventListener('submit', function(event) {
        event.preventDefault();
        if(username.value.length > 0) {
          alert.textContent = "Success";
        }
      });

      let actionList = [
        () => {username.value = 'W3C_User';},
        () => {submit.click()}
      ]
      let actionListIndex = 0;

      document.addEventListener('acttfNextAction', (event) => {
        if(actionListIndex < actionList.length){
          actionList[actionListIndex++]();
        }
        else {
          event.preventDefault(); // Return no further actions available
        }
      });
    </script>
  </body>
</html>

Passed Example 2

Status messages about the progress of the NASA launch progress are displayed and available to AT through the use of role="log".

<html lang="en">
  <head></head>
  <body>
    <h1>NASA Launch Progress</h1>
    <div id="updateLog" role="log">
      <h2 id="logHeading">Launch Updates</h2>
      <ul id="log-entries">
      </ul>
    </div>
    <script>
      // Simulate launch updates
      let launchSteps = [
        'Fuelling Boosters',
        'Checking all checklists',
        'Buckling In Astronauts',
        'Initiating Countdown',
        'Launching!'];
      let logIndex = 0;
      let logEntries = document.querySelector('#log-entries');
      setInterval(() => {
        let li = document.createElement('LI');
        li.textContent = `${launchSteps[logIndex++ % launchSteps.length]}`;
        logEntries.prepend(li);
      }, 3000);
    </script>
  </body>
</html>

Failed

Failed Example 1

A success status message becomes visible after successfully completing the form, but the status message is not available to AT since no live region role or aria-live attribute is used.

<html lang="en">
  <head></head>
  <body>
    <form id="example_form">
      <label for="username">Username</label>
      <input type="text" id="username"/>
      <input type="submit" id="submit"/>
    </form>
    <p id="submit_message"></p>
    <script>
      // Handler for sending success notification
      let form = document.querySelector('#example_form');
      let username = document.querySelector('#username');
      let submit = document.querySelector('#submit');
      let alert = document.querySelector('#submit_message');
  
      form.addEventListener('submit', function(event) {
        event.preventDefault();
        if(username.value.length > 0) {
          alert.textContent = "Success";
        }
      });

      let actionList = [
        () => {username.value = 'W3C_User';},
        () => {submit.click()}
      ]
      let actionListIndex = 0;

      document.addEventListener('acttfNextAction', (event) => {
        if(actionListIndex < actionList.length){
          actionList[actionListIndex++]();
        }
        else {
          event.preventDefault(); // Return no further actions available
        }
      });
    </script>
  </body>
</html>

Failed Example 2

Status messages about the progress of the NASA launch progress are displayed as [visible text], but are not available to AT since no live region role or aria-live attribute is used.

<html lang="en">
  <head></head>
  <body>
    <h1>NASA Launch Progress</h1>
    <div id="updateLog" role="log">
      <h2 id="logHeading">Launch Updates</h2>
      <ul id="log-entries">
      </ul>
    </div>
    <script>
      // Simulate launch updates
      let launchSteps = [
        'Fuelling Boosters',
        'Checking all checklists',
        'Buckling In Astronauts',
        'Initiating Countdown',
        'Launching!'];
      let logIndex = 0;
      let logEntries = document.querySelector('#log-entries');
      setInterval(() => {
        let li = document.createElement('LI');
        li.textContent = `${launchSteps[logIndex++ % launchSteps.length]}`;
        logEntries.prepend(li);
      }, 3000);
    </script>
  </body>
</html>

Inapplicable

Inapplicable Example 1

The example shows updates to stock, which falls under the Not a Status Message exception.

<html lang="en">
  <head></head>
  <body>
    <h1>Stock Information</h1>
    <div id="updateLog" role="log">
      <h2 id="logHeading">Stock Updates</h2>
      <ul id="log-entries">
      </ul>
    </div>
    <script>
      // Simulate stock updates
      let stockUpdates = [
        'UP',
        'DOWN',
        'PLATEAUING',
        'SIDEWAYS'
      ];
      let logIndex = 0;
      let logEntries = document.querySelector('#log-entries');
      setInterval(() => {
        let li = document.createElement('LI');
        li.textContent = `Stock is currently ${stockUpdates[logIndex++ % stockUpdates.length]}`;
        logEntries.prepend(li);
      }, 3000);
    </script>
  </body>
</html>

Inapplicable Example 2

Focus is placed on the status message when the form is submitted, which falls under the Text Receives Focus exception to the applicability.

<html lang="en">
  <head></head>
  <body>
    <form id="example_form">
      <label for="username">Username</label>
      <input type="text" id="username"/>
      <input type="submit" id="submit"/>
    </form>
    <p tabindex="0" id="submit_message"></p>
    <script>
      // Handler for sending success notification
      let form = document.querySelector('#example_form');
      let username = document.querySelector('#username');
      let submit = document.querySelector('#submit');
      let alert = document.querySelector('#submit_message');
  
      form.addEventListener('submit', function(event) {
        event.preventDefault();
        if(username.value.length > 0) {
          alert.textContent = "Success";
          alert.focus();
        }
      });

      let actionList = [
        () => {username.value = 'W3C_User';},
        () => {submit.click()}
      ]
      let actionListIndex = 0;

      document.addEventListener('acttfNextAction', (event) => {
        if(actionListIndex < actionList.length){
          actionList[actionListIndex++]();
        }
        else {
          event.preventDefault(); // Return no further actions available
        }
      });
    </script>
  </body>
</html>

[tbostic32]

While we could hold the conversation here, there are so many discussion points that I think it would be best if we could put them in the discussion here (https://github.com/act-rules/act-rules.github.io/discussions/2046) where it will be more organized.