2

I have a single page application. There is a page with products and on the bottom a link to go to the next page. Upon clicking this "next" link the list of products in the DOM is replaced. While the link clicked has stayed the same and maintains focus from the click. Is it better for me to do something like document.activeElement.blur()(which removes focus on currently focused element to reset focus) in that case? Or should I just leave focus on that as is?

I'm unsure what best practice is as with normal server routed pages the focus would be reset with the page load. But I haven't seen any information indicating manually resetting focus on client routing would be the best experience from an accessibility point of view.

I also just found there is differing behavior when resetting the focus. Which begs the question if it should be done if the behavior is different for different browsers? Can be viewed in this codepen that resets focus every 1.5seconds.

  • Chrome: focus is cleared but once tab is pressed again we focus on the link next from the one that was previously focused.
  • Firefox: same as Chrome.
  • Safari: Resets focus order to first focusable item.
  • IE11: same as Safari.
  • Edge: same as Safari.

Edited for clarity around the JS. And added findings on that JS's behavior in different browsers.

Improve this question
3
  • This sounds like it has the makings of a very good question: there are issues around usability and accessibility here but we're not developers or engineers so don't fully understand your JavaScript reference - Could you rephrase the question without the JS so that we can understand what you're asking a bit better?
    – Roux Martin
    Commented Jun 11, 2018 at 7:39
  • 1
    @AndrewMartin .activeElement.blur() (where "to blur" is a counterpoint to "to focus") removes the focus from the active element. Unless other JS kicks-in, after calling this you would be left with no element on the page having focus. So (as I understand it) the question boils down to whether the "Next" link should retain focus after moving to the next page of results.
    – TripeHound
    Commented Jun 11, 2018 at 9:32
  • I edited the post to add clarity to the JS resetting the focus and my findings as to what that actually does to the focus order in different browsers.
    – anthony-dandrea
    Commented Jun 11, 2018 at 16:24

1 Answer 1

Reset to default
1

From a UX perspective when a user gives focus to an element, other possibilities open as to how to use that element and is surrounding elements.

If someone is attempting to quickly page through your list of products, when the focus is maintained on the next button all they simply have to do is hit the enter key to see the next page.

The user may also press shift tab to go backwards in scope to your "Back" button and then press enter to see the previous products.

So to maintain this inbuilt usability i would not reset the focus of the user for paging a list.

If you were redrawing the entire page in javascript with a whole new context for the content being shown, i would reset the user focus or possibly focus them on the first new item on the page.

Because this would be essentially the same as navigating to a new URL address, which resets focus.

Lastly i would argue that the user is not "routing" when paging a list, they are interacting with the pages context. "routing" would be like visiting an entirely new address.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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