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

Published on Updated on

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 cause 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:

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

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

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.