Day 46: ARIA Live Regions, Part 1

Today I started digging into ARIA live regions to better understand how they can be useful in making SPAs (single-page applications) more accessible to screen reader users. This is a topic that will take some research because I’m not familiar with using most of those attributes. YouTube was a great place for me to start because I knew I’d find a few examples of how they work along with helpful screen reader demos.

Things I accomplished

Watched:

Tried the ARIA Live Region Test (by Terrill Thompson) with VoiceOver on Safari.

What I learned today

  • The aria-live attribute is useful to update a screen reader user about changing content. It only reads the changed content.
  • The aria-atomic attribute can be set as true on the same element as the aria-live element in order to read the entire contents within that element, in order to give context.
  • aria-live possible values:
    • off (default)
    • polite (waits for user to finish what they’re doing)
    • assertive (interrupts user)
  • Other ARIA live regions include aria-busy and aria-relevant.

So much to learn, so little time! I’ll be spending more time on the topic and intricacies of live regions tomorrow, as well. As always, I am ever so grateful for those who have taken time to experiment and share their screen reader test findings with the rest of us.