Focus management & consistency

• Focus must be deliberately and consistently placed at the
  • top of new page content or
  • top of the HTML page
• Pick one or the other and consistently follow that pattern
• DO NOT place focus on the first input on page load

How does dynamic aria-live content work?

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

About alerts

• By default an element using role="alert" has aria-live="assertive"

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 consistently 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.