Return to ARIA Examples Index, or the ARIA Accessibility Home Page

ARIA live regions example

Author Lisa Seeman

The content below uses aria-live, aria-atomic and aria-relevant.

The time is now:

Taking a brake...

Notes:

  1. The clock has aria-live="off "- We do not want it to bother users just because the clock changed.
  2. The normal alert has aria-live="polite" - We want to interrupt people at the next convenient point.
  3. The rude alert is set to aria-live="assertive" - We want to interrupt people right now
  4. The rude alerts will bug the user every x seconds...ongoing
  5. However every time we bug them we only want to say the new alert text so...aria-atomic="false" (only read new content)
  6. When we clear the rude alert, we do not want to hear all the alert messages that were deleted so aria-relevant="additions ". Note this is the default, so we did not really have to set it, but it shows the point.

Mess around with setting

Hate your users? If you want to see the affect of different settings on your screen reader try the following..... (at your own risk)

How we made the live region (tutorial)

To make an aria live region we just needed to set

Assistive technologies need to let the user know when content has changed.   The aria-live attribute  indicates that an element will be updated, and describes the types of updates.

 


Value

Description

off (default):

Updates to the region will not be presented to the user unless the assistive technology is currently focused on that region.

polite:

(Background change) Assistive technologies should announce updates at the next graceful opportunity, such as at the end of speaking the current sentence.

assertive:

This information has the highest priority and assistive technologies  should notify the user immediately. Because an interruption may disorient users or cause them to not complete their current task, authors  should NOT  use the assertive value unless the interruption is imperative.

 

 

Accessibility 2.0

Managed by Lisa Seeman