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 accomplishedPermalink for "Things I accomplished"
Udacity lesson Introducing 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.
What I learned todayPermalink for "What I learned today"
aria-liveattribute is useful to update a screen reader user about changing content. It only reads the changed content.
aria-atomicattribute 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.
- off (default)
- polite (waits for user to finish what they're doing)
- assertive (interrupts user)
- Other ARIA live regions include
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.