WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Managing focus for hyperlinks and page content

for

From: Bryan Garaventa
Date: Sep 26, 2016 4:12PM

Hi, Birkir is right, there are different approaches to this that work in differing circumstances.

Here are two live examples of this that show the two differing approaches:

1
http://whatsock.com/
Which is the example of a single page app that loads content in dynamically then moves focus to the beginning of the newly rendered content. This occurs every time one of the left nav buttons is toggled such as Overview, Live Demo, Core API, etc.

2
http://whatsock.com/bootstrap/jquery
Which is another type of single page app that uses single focusable ARIA Tabs that when activated loads content into the page and does not move focus automatically after activation. This occurs with all of the tabs such as Bootstrap, Accordion, etc.

Which one you use depends on what you want, but it's important to note that if you use single focus ARIA Tabs for this then focus should not move automatically, and if you use links or toggles instead and you only scroll the newly loaded content into view instead of moving focus there, then keyboard only users will not be able to tab directly into the newly loaded content.

All the best,
Bryan

Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Sean Keegan
Sent: Friday, September 23, 2016 5:43 PM
To: <EMAIL REMOVED>
Subject: [WebAIM] Managing focus for hyperlinks and page content

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