2

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.

Benjamin Vaughan
  • 77
  • 1
  • 7
  • In Firefox you can do `document.documentElement.focus()`, but obviously, this works only in Firefox... – Kaiido Oct 20 '21 at 11:51
  • What do you mean when you say you want to "reset the keyboard position on the page"? Do you mean you just want the keyboard focus to be on the non-visible link element #hidden-top-of-page-link? Or do you want keyboard focus to be on the HTML tag? – George Chapman Oct 20 '21 at 12:13
  • @George, I think the `#hidden-top-of-page-link` is a workaround to put the keyboard focus at the top. The OP would rather not have to do that and instead would like a "put the focus at the top as if the page were freshly loaded". – slugolicious Oct 20 '21 at 14:02
  • Yes exactly that @slugolicious my workaround does the job but it would be great if there was something inbuilt. – Benjamin Vaughan Oct 25 '21 at 13:19
  • if you're using jQuery, use $( ":tabbable" ) then first element can be shorter for you =) – oCcSking Jul 03 '23 at 13:31

1 Answers1

4

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • While I like this idea (reuse an element we should already have!), will it not have an unintended consequence that your "skip to content" link will then become visible on mobile or for mouse users, which is probably not desired? I can't work out whether this would happen or not without trying it lol! – GrahamTheDev Oct 20 '21 at 14:39
  • I think "skip links" should be visible for (most) all users. Perhaps not mouse users but it's not a big deal if they see it. Definitely for keyboard and screen reader users. Mobile users is questionable. Unless I'm a mobile screen reader user, I'm not really concerned with my "focus" on mobile. I can usually tap at the top of the page to scroll back to the top, at which point, I'm not really concerned where my focus is because I'm not going to start tabbing (unless I have a bluetooth keyboard). It'd be interesting to see any research on whether mobile users use "back to top" widgets. – slugolicious Oct 20 '21 at 17:23
  • 1
    Thank you for this answer, a lot in here to think about, especially the way that we handle the skip links for different types of users. @slugolicious I get exactly what you mean having to tab down and hear the word 'Link' which may get annoying. I'll explore your solution and see if I can come to a compromise! Thanks for taking the time. – Benjamin Vaughan Oct 25 '21 at 13:23