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