Day 46: ARIA Live Regions, Part 1

Published on 15 Jan 2019

• journal
• resources
• was
• aria
• javascript
• spas

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.

Watched:

• ARIA Live Regions Screen Reader Demo (YouTube)

• Udacity lesson Introducing ARIA Live (YouTube)

• a11y aria-disabled and aria-live (YouTube)

• VoiceOver iOS 8.1 Speaking Characters Remaining aria-atomic & aria-relevant on aria-live regions (YouTube)

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

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