Set keyboard tabbing focus to the top of the page / resetting keyboard focus with JavaScript / jQuer-CodePudding

Whilst working on making a website more accessible I came across an issue regarding the 'Go back to the top' button that is available on most sites. I had to find a solution to scroll to the top and then set the keyboard focus to the top of the page so users could start tabbing and navigating again from the top.

First I added a link directly after the body (and before my accessible 'skip to content' link) that is hidden using the following code:

<body>
    <a id="hidden-top-of-the-page-link" tabindex="-1"></a>
    <a class="skip-to-content-link" tabindex="0" href="#main-content">Skip to content</a>

Then in my 'to top' button function I made this hidden link focus after calling my scroll event.

$("#to_top").on("click", function () {
            $("html, body").animate({scrollTop: $("html").offset().top}, 500);
            $("#hidden-top-of-the-page-link").focus();
        });

This solution seems to work great though feels quite hacky. What I would really like to do would be to 'reset' the keyboard position on the page and was wondering if anyone knew a good way / best practice way to do that.

Thanks in advance all.

Note: Looked first on the question how to set focus on top of the page but all answers were focussed around scrolling which is not what I need help with here.

CodePudding user response：

I'm not aware of a way to make the page behave as if it were freshly loaded where the keyboard focus is at the top (other than forcing an actual page refresh, which I wouldn't recommend).

However, you already have a good element at the top to move the focus to - your "skip to content" link (WCAG 2.4.1). The "back to top" element could be a simple link with href="#skipID" where "skipID" is the ID on the "skip to content" link.

<body>
  <a id="skipID" class="skip-to-content-link" tabindex="0" href="#main-content">Skip to content</a>
...
  <a href="#skipID">Go to top</a>

That will let the browser handle the scrolling and move the keyboard focus. You don't have to write any javascript and it removes your "empty" link whose only purpose is a place to put the keyboard focus. If you kept your "empty" link, then a screen reader user could still navigate to the link (not via TAB since you have tabindex="-1" but using the screen reader "next DOM element" key which is usually the downArrow key) and they would hear "link" but no other text associated with it. That would be a confusing situation.

As an aside, as a keyboard user myself I never use the "go to top" links provided on a page mainly because I have to navigate to that element which is usually the last thing in the DOM. If I'm that far down in the DOM, I can just TAB a few more times and I'm back at the top anyway. Or I use the "put the focus on the address bar" shortcut key (alt D for firefox and chrome) and start TABBING from there.