How does aria-live work?

  • The screenreader expects content within an aria-live="polite" attribute to change
  • By default, only the content that has changed will be read
  • To force the screenreader to read contents that did not change within the element, add aria-atomic="true"
  • Rarely should you use aria-live="assertive". It will override every other message from the screenreader

About alerts

  • An element using role="alert" has aria-live="assertive" by default

Code example

This is one example of a dynamic content region. It is similar to the carousel example.

  • It is not the only way to build a dynamic region, but it meets all the critieria:
    • New content is announced
    • Focus is placed at the top of the content
<div id="dynamic-app-container" 
     class="simp" 
     aria-live="polite" 
     tabindex="-1">

  <h2 class="h-bravo">
    NATO alphabet experience
  </h2>

  <ul class="slide-list">
    <li class="slide visible">
      <h3 class="h-charlie">
        Alpha
      </h3>
      <p>
        The NATO alphabet is the most widely used radiotelephone spelling alphabet.
      </p>
      <button class="next">
        Start
      </button>
    </li>

    <li class="slide inert">
      <h3 class="h-charlie">
        Bravo
      </h3>
      <p>
        To create the code, a series of international agencies assigned 26 code words acrophonically to the letters of the English alphabet.
      </p>
      <button class="tertiary previous">
        Back
      </button>
      <button class="next">
        Next
      </button>
    </li>

    <li class="slide inert">
      <h3 class="h-charlie">
        Charlie
      </h3>
      <p>
        This is the best NATO letter.
      </p>
      <button class="tertiary previous">
        Back
      </button>
      <button>
        Submit
      </button>
    </li>
  </ul>
</div>

NATO alphabet experience

  • Alpha

    The NATO alphabet is the most widely used radiotelephone spelling alphabet.

  • Bravo

    To create the code, a series of international agencies assigned 26 code words acrophonically to the letters of the English alphabet.

  • Charlie

    This is the best NATO letter.