Live

ARIA live is perfect for announcing information about changes in state without disrupting the users focused place on the page.

The Problem

Users are not aware of stateful changes that occur outside of the their area of focus.

The Solution

Judicious use of ARIA live regions helps fill in the gaps that screen reader users would otherwise miss.

Live Examples

Before illustrates the problem, After illustrates the solution. Click the header to see it larger in a modal.

Code Comparison

Code diff between the before and after examples above to show the changes necessary. To copy the final source click on the 'after' path link before the diff.

source

Comparing /examples/aria/live/before/index.html to /examples/aria/live/after/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Accessibility Solutions - ARIA - Live</title>
    <link rel="stylesheet" href="../../../presentation.css" />
    <link rel="stylesheet" href="live.css" />
  </head>
  <body id="top">
    <main>
      <h1>ARIA Live examples</h1>

      <article aria-labelledby="polite-example">
        <header>
          <h2 id="polite-example">Polite</h2>
          <p>
            The most common use of ARIA live is to announce a change in state to
            the user as soon as possible without interrupting. Using
            <code>aria-live="polite"</code>, the message will be announced the
            next time the user is idle.
          </p>
        </header>

        <p id="polite-live-region" role="status" aria-live="polite"></p>
        <button class="polite-button">
          Click here for polite examples using <code>aria-live="polite"</code>
        </button>
      </article>

      <article aria-labelledby="assertive-example">
        <header>
          <h2 id="assertive-example">Assertive</h2>
          <p>
            Far less common but occasionally useful is to be able to announce an
            important time-sensitive message by using
            <code>aria-live="assertive"</code>. Please note that user agents or
            assistive technologies mY choose to clear queued changes when an
            assertive change occurs. (e.g., changes in an assertive region may
            remove all currently queued changes).
          </p>
        </header>

        <p id="assertive-live-region" role="status" aria-live="assertive"></p>
        <button class="assertive-button">
          Click here for assertive examples using
          <code>aria-live="assertive"</code>
        </button>
      </article>

      <article aria-labelledby="relevant-example">
        <header>
          <h2 id="relevant-example">Relevant Only</h2>
          <p>
            In addition to <code>aria-live</code> allowing us to set priority of
            our messaging, there is also <code>aria-relevant</code> that lets us
            define what types of changes should be presented. This example
            simulates a chat app where messages are appended to a growing list,
            in this case it would be appropriate for only additions to be
            announced to the user with <code>aria-relevant="additions"</code>.
          </p>
        </header>
        <div role="status" aria-live="polite" aria-relevant="additions">
          <ul id="relevant-live-region">
            <li>
              <h3>Steve:</h3>
              <p>
                Hey lookit that cool button down there, I wonder what that does?
              </p>
            </li>
          </ul>
        </div>
        <button class="relevant-button">
          add another message to chat above
        </button>
      </article>
    </main>

    <script src="live.js"></script>
  </body>
</html>