This content originally appeared on Hidde's blog and was authored by Hidde de Vries
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>
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:
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.
Further reading
- Rob Dodson on removing headaches from focus management
- Sequential focus navigation starting point in the HTML spec
This content originally appeared on Hidde's blog and was authored by Hidde de Vries
Hidde de Vries | Sciencx (2017-04-24T00:00:00+00:00) Where focus goes when following in page links. Retrieved from https://www.scien.cx/2017/04/24/where-focus-goes-when-following-in-page-links/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.