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.
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.