WebAIM - Web Accessibility In Mind

E-mail List Archives

Managing focus for hyperlinks and page content

for

From: Sean Keegan
Date: Sep 23, 2016 6:43PM

Hello all,

I am interested in feedback on a situation that created some "interesting"
solutions from a development team:

We have a single-page application written in Angular with a set of
hyperlinks on the left side of the page representing a navigation menu.
Activating a hyperlink updates the right side of the page with new text
content, but keyboard focus is still on the hyperlink. So, new content is
displayed, but you would never know what happened if the viewport is
magnified or using a screen-reader.

Various solutions were proposed, including programmatically setting focus
to the heading element of the newly displayed text content, setting focus
back to the top of the page with an aria-live update, using an aria-live
region to announce the page has new content, or wrapping the entire newly
displayed region in an aria-live region. There were a few other options
mentioned that shall not be repeated (i.e., screen-readers need to get
better!).

We have a solution in place now, but I am curious as to how others have
addressed this situation.

Thanks,
sean