The user's focus is directed to new content added to the page

The user's focus is directed to new content added to the page

Appears in: Accessibility audits

Whenever new content is added to a page, try to ensure the user's focus gets directed to that content, so they can take action on it.

How to manually test #

Single-page apps are important to test, especially when it comes to managing a user's focus to new content.

Typically in a single-page app, clicking on a link won't do a hard refresh. Instead, a route change fetches new data for the <main> content area.

For sighted users, this works fine. But users navigating with a screen reader or other assistive technology may not know that the new content has been added to the page. There's no indication that they should navigate back to the <main> area.

When this happens, you'll want to manage the user's focus to keep the user's perceived context in sync with the site's visual content.

How to fix #

To manage a user's focus to fresh content on a page, find a good heading in the newly loaded content and direct focus to it. The easiest way to pull this off is to give the heading a tabindex of -1 and call its focus() method:

<h2 tabindex="-1">Welcome to your shopping cart</h2>
// Assuming this gets called every time new content loads...
function onNewPage() {
var heading = document.querySelector('h2');
// You can also update the page title :)
document.title = heading.textContent;

Assistive technologies announce the new heading and the main landmark area that it's contained in.

See also Managing focus for accessibility.

You probably don't want to do this focus management when a user first arrives at your site. Only implement this for subsequent navigation, like when they click a link.

Resources #

Source code for The user's focus is directed to new content added to the page audit

Last updated: Improve article