What to do with focus after page transition?

[balazsorban44]

Hi there!

In my Next.js app, I have a logo inside a link in the header that takes the user to the homepage.

I override my focus styling to be more prominent on a elements, when :focus-ed.

When I click on the app logo link, and navigate to another page, the clicked logo receives a styling, which is still visible after the transition. This is because the element is part of a persistent layout. Should I somehow "reset" (and if so, how) the focus on the page, or is it OK to let it be where it was?

This is something that happens to all links/buttons/inputs that won't change on page transition, like header elements in persistent layouts. (search bar, button to home, menu items, etc.)

What is the standard behavior? How should I handle it?

The page was sent back from internal testing, cause they "did not like" how the focus persists. Should I tell them this is expected because of a11y? Or can/should I do something about it?

Thanks!

[kyleboss]

Good question! So a couple of years ago, Marcy Sutton conducted user-testing to decide what the best behavior would be for scenarios regarding client-side routing & focus like the one you mentioned. Read more here: What we learned from user testing of accessible client-side routing techniques with Fable Tech Labs.

The tl;dr; of the findings regarding focus focus for screen readers (not necessarily all assistive technologies are these:

• "resetting focus to the top of the app would be very overwhelming" (This is why focusing on the logo might not give the best UX)
• "Focusing on a wrapper element for new content worked okay"
• "Focusing on a heading was found to be the best experience"

For NextJS specifically, there is a PR out #20428 that handles this by giving focus to the first h1, falling back to a main, and lastly to body.

Edit 1/13/2021:

The above answer's tl;dr; is very specific to screen readers and not indicative of all assistive technologies. The recommended solution ultimately is to yield focus to a small, keyboard-interactive element like a skip link.