WebAIR

Are there any controls that automatically update content in another part of the page when you activate them? (FAC17)

Why Is This Important?

Dynamic updating of content is often fine, providing that you inform the user of what they can expect in a way that is accessible to them. Failure to do this could result in unexpected changes of context and content which can be very confusing.

 

One way of informing screen reader users of updates and changes to a webpage or part of a webpage is by using WAI-ARIA 'Live Regions'. The "aria-live" attribute can be used to indicate to a screen reader that a section of the webpage is "live" and that it should announce any changes to the user when it updates. For example, a live train arrivals webpage could use the "aria-live" attribute, which would prompt the screen reader to announce any changes to the train arrival times.

How To Fix The Problem

A simple way of notifying users that form controls will automatically update content in another part of the page is to provide a clear explanation on the webpage about what is going to happen.

 

The WAI-ARIA 'Live Regions' can also help to notify users of automatically updating content. To prevent this feature from notifying the user too frequently, there are several values that can be used. These are:

Example

//Using the aria-live attribute, with notifications set to "polite"
<h1 id="time_changes">Train Arrivals</h1> <ul aria-live="polite" role="complementary" aria-labelledby="time_changes">
<li>London Kings Cross - 18:36</li>
<li>Edinburgh - 19:52</li>
<li>Hull - 21:31 (10 minutes late)</li>
</ul>

Further Information

  1. http://webaim.org/techniques/aria/#dynamic
  2. https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/forms?redirectlocale=en-US&redirectslug=aria%2Fforms