A11Y Solutions
Provides auto-suggestions when entering text


    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.

    Related Articles

    Live Examples

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

    Please note that this Before example contains inaccessible code, use this link to skip to the After Live Example



    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.


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

    <!DOCTYPE html>
    <html lang="en">
    <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" />
    <body id="top">
    <h1>ARIA Live examples</h1>

    <article aria-labelledby="polite-example">
    <h2 id="polite-example">Polite</h2>
    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 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>

    <article aria-labelledby="assertive-example">
    <h2 id="assertive-example">Assertive</h2>
    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 id="assertive-live-region"
    role="status" aria-live="assertive"></p>
    <button class="assertive-button">
    Click here for assertive examples using

    <article aria-labelledby="relevant-example">
    <h2 id="relevant-example">Relevant Only</h2>
    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>.
    <div role="status" aria-live="polite" aria-relevant="additions">
    <ul id="relevant-live-region">
    Hey lookit that cool button down there, I wonder what that does?
    <button class="relevant-button">
    add another message to chat above

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