2

In a traditional website, the entire webpage is reloaded after a navigation event, so the user's focus always restarts at the top of the document—in our case, that means the first Tab press would focus "Skip to Main" for users navigating via keyboard.

However, ours is a single page app, and single page apps only reload a portion of the page during navigation events. If the user is focused on an element that persists between views (e.g. a navigation element), by default, the focus will remain on that element. I'm worried this might seem strange for the focused element to persist when the view changes.

My team is trying to determine, should this focus be reset as it would be in a traditional site, or leave the focus where it is, perhaps on a navigation element that persisted between views?

5
  • This question seems to be about implementation and is therefore off-topic for this site. If you believe this is in fact a UX question, then update your question and provide more clarity about how this is related to UX and what your exact UX concerns are.
    – musefan
    Jul 16, 2021 at 10:51
  • 1
    @musefan I read the question differently. It doesn't sound like a "how do I code this" question as much as it's a "how should an accessible user experience work for the user, given that the app is a single page?" Sounds good to me. Jul 19, 2021 at 13:14
  • @maxathousand It's a tricky one, but I am still convinced this is an implementation question. It would be nice if the OP would clarify (they don't seem too fussed about getting an answer either way). Otherwise, why mention anything about the technical implementation of it (i.e. removing focus on pressing enter)?
    – musefan
    Jul 19, 2021 at 13:32
  • Can you clarify your question please? The wording you have used is ambiguous and makes it difficult to identify what question you are actually asking here. Are you trying to work out what the best user experience is, or how you can technically achieve it?
    – musefan
    Jul 19, 2021 at 14:02
  • 2
    This isn't asking "how do I code this", it's asking "how should this work?" Modern single-page applications can affect how the user navigates the application. In a traditional website, the entire webpage is reloaded after a navigation event, so the user's focus always restarts at the top of the document. However, a single page app will only reload a portion of the page. If the user is focused on an element that persists between views (e.g. a navigation element), the focus will remain on that element. The question is "should this focus be reset, as it would be in a traditional site?" Aug 31, 2021 at 13:08

1 Answer 1

1

I think it probably depends somewhat on the structure and information architecture of the website.

A common strategy for website navigation these days is to have a sticky or collapsible top navigation menu so that there is some persistent navigation element visible to the user no matter how much they scroll.

Some single page websites use their top level navigation essentially as links to the anchors in different sections of the page, in such a way that there really is no connection between one section of the page to the other. In this case it is expected that the user will simply use the top level menu to navigate to other sections of the page.

However, other single page websites try to encourage the user to scroll down the page as it attempts to create a narrative (or a funnel) that leads to a specific call-to-action and therefore does not want the user to break focus and engagement to the content.

So depending on your particular site content and audience, you should test the two different strategies and see which one helps you achieve the intended outcome more successfully.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.