Question on proper use of aria live in a single page web app

[Pamela Fox]

Hi there - 

I'm a frontend engineer at Coursera.org. Our presence at www.coursera.org is implemented as a single page webapp, where the HTML is built entirely up by JavaScript (using Backbone, templates, and RequireJS), and when the user navigates from one page to the next, we do not refresh the entire page, we simply refresh parts of it (what we call "regions" in our code).

We currently have our entire page wrapped in a DIV with aria-live="polite", since everything in that DIV is subject to change on a page refresh. However, in a recent accessibility audit, we were told that it is leading to duplicate announcements, and that we should be wrapping smaller elements in that attribute. But I worry that if we do not have aria-live on that wrapper DIV, then the screen reader may not notice that the page has swapped out. 

What is the general best practice for sites implemented this way in terms of the live and role attributes, and making sure the screen reader makes the right number of announcements? Or, what specific recommendation would you give for our setup?

Thanks!

- pamela

[Bryan Garaventa]

There really isn't a need to wrap full content panels within live region markup, which can be misleading at times. For example, when content is announced, it does so in the same manner as the screen reader announces text when navigating, so if you have that content announce itself when focus remains on the triggering link, it may appear that focus is somewhere else on the page. Then, when the user starts arrowing, what they hear won't match the content that was being announced.

 

I use the same content switching strategy at WhatSock.com, where, if you activate a left nav tab, it dynamically updates the main container. When the content finishes loading though, focus is automatically moved to the beginning of the new content, so screen reader users can simply arrow or tab down from that point on without trouble.

 

I have found the automatic announcement of content to be helpful on popups and tooltips though, which works well in Voiceover, since focus redirection doesn't really do much on touch screen devices.

--
You received this message because you are subscribed to the Google Groups "Free ARIA Community" group.
To view this discussion on the web visit https://groups.google.com/d/msg/free-aria/-/f9jYPLIyKOoJ.
To post to this group, send email to free...@googlegroups.com.
To unsubscribe from this group, send email to free-aria+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/free-aria?hl=en.