Where focus goes when following in page links

Today I learned about the sequential focus navigation starting point, which helps browsers decide what to do with focus when you link to content that is not focusable.

Finding out which element has focus

In a given web page, there can only be one thing that ‘has focus’. As most working with focus management problably know, this is how to find it (roughly speaking):

document.activeElement

(Type this into your Dev Tools’ console or console.log it from scripts).

When you tab through a page and check document.activeElement in between each tab, you will see it is always set to the thing that has focus.

Similarly, if you build a custom widget with JavaScript and manually shift focus, you can use the above to verify that focus has shifted the way you expected. If that thing is in view, you should also see the focus outline visually (assuming you have not set outline to none).

What happens when you follow an in page link

This is what I mean by an in page link mechanism:

<a href="#the-hague">The Hague</a>
<!-- lots of HTML -->
<div id="the-hague">
  <h2>Our stores in The Hague</h2>
  <p>We have two stores in The Hague, one is at De Passage</p>.
</div>

(view on Codepen)

When you follow the link to “The Hague”, focus does not shift to the “The Hague” div, as the console will tell you after activating that link:

> document.activeElement
< <body></body>

Focus was moved to body, not to div#the-hague. The reason is that div#the-hague is not a focusable element (divs, by default, are not), so the browser returns focus elsewhere, in this case the body.

The focus navigation starting point

Something interesting happens with the above example in some browsers. When you TAB after following the link, it does go to the next focusable thing from div#the-hague.

I wasn’t sure what was going on, so I asked on A11Y Slackers, where Alice pointed me at the following. There is a browser feature called the sequential focus navigation starting point, which is a position in the document from which the browser decides where to go when the user presses TAB or SHIFT TAB.

What happened after activating the link in my example is that, though the focus did not move, the focus navigation starting point did.

I’ve made a Codepen to illustrate the above, and the situations in which the linked content have implicit and explicit tabindex.

Other ways of shifting the focus navigation starting point

Browsers don’t just shift this navigation starting point when you following internal links. The spec also recommends browsers to do this when users click somewhere in the document.

Browser support

Not all browsers support the sequential focus navigation starting point. In my tests, it worked in Opera, Chrome and Firefox, but not in Internet Explorer 11 or Edge.