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):
(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.
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>
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
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
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
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.
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.