Provide notification of dynamic changes to content

Where dynamic content is updated either automatically or in response to a user action, make sure that users are notified of this update in an accessible way.

Make sure that the notification is appropriate to the type and importance of update that has taken place. For example, an update that reports an error or a problem may be considered more important than an update to a newsfeed that is shown as supplementary content to the main page.

  • Identify content that may be updated as a WAI-ARIA live region. Use the aria-live attribute on the container of the content that may be updated or, in special cases, use one of the WAI-ARIA special live region roles.
  • Provide a suitable priority for update notifications. Decide how important it is that a user hears the updated content and whether the screen reader should be interrupted from what it’s currently reading. This will influence what value you give the aria-live attribute.

Testing

  • For each piece of dynamically updated content, inspect the underlying code. Is it identified in code as a live region, with a suitable level of priority of notification?
  • Listen to the page with a screen reader. Are notifications made in an accessible way? 

Resources

✎ Technique: Form feedback with live regions

Providing form feedback accessibly helps users submit data more accurately and reduces the chance for error. For learning resources, easy access to feedback supports the learning process; for forms collecting data, good feedback helps to reduce the chance of input errors being made. 

When providing feedback on user input, JavaScript is often employed to print messages to the screen. Users looking at the screen will see the message appear in response to their actions. Screen-reader users who do not have access to visual changes need to be notified of the feedback so they can have an opportunity to read it and act on it.

WAI-ARIA live regions can be used for this. Adding content inside a live region tells assistive technologies to announce the content to the user—without users having to move to that part of the page.

Example

In this example, the user is presented with a multiple choice quiz question: "Who's the biggest selling recording artist?" When they click the "check answer" button, a message provides feedback on their answer. The markup looks like this:


<form>
  <fieldset>
    <legend>Who's the biggest selling recording artist?</legend>
    <div>
      <label><input type="radio" name="answer" value="michael"> Michael Jackson</label>
      <label><input type="radio" name="answer" value="elvis"> Elvis Presley</label>
      <label><input type="radio" name="answer" value="iggy"> Iggy Pop</label>
      <label><input type="radio" name="answer" value="madonna"> Madonna</label>
    </div>
  </fieldset>
  <div aria-live="polite">
  </div>
  <div class="buttons">
    <button type="button" class="check">check answer</button>
    <button type="submit" disabled>next question</button>
  </div>
</form>

Note the empty <div> with the aria-live="polite" attribute. This is our live region. When we add content inside it (text or HTML elements containing text), screen readers will announce that content.

For instance, if the user activates the "check answer" button without having chosen an answer, the live region will be populated with the message, "Please choose an answer." This message appears to sighted users as a highlighted box, and it’s heard as speech by an assistive-technology user.


$('[aria-live="polite"]').append('<p>'+message+'</p>');

If, upon pressing "check answer," the user has the correct answer checked, the message congratulates them. In addition, the "next question" button is enabled (by removing the disabled attribute) and focused.


$('[type="submit"]')
        .removeAttr('disabled')
        .focus();

Using the screen reader NVDA with Firefox, this produces the screen reader speech output, "Elvis is correct! You can go to the next question, next question button." That is, the live region is announced, and then the newly focused element is announced. Three important pieces of information are provided: The user has chosen correctly, they can continue, and the button currently in focus will allow them to continue. Had we used an aria-live value of assertive, the live region's message would have overridden the focus change and "next question button" would not have been announced.

Video: Form feedback with NVDA using a live region

Video: Form feedback with NVDA using a live region

Code editor

An editor is available to try out the preceding live region example. Experiment by removing the live region and try operating it with just the keyboard, with your eyes closed.