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.
100 Days of A11y 