Proper Tabbing to Interactive Elements in Firefox on macOS
- January 15, 2021
- Web Development
I just had to debug an issue with focusable elements in Firefox. Someone reported to me that when tabbing to a certain element within a CodePen embed, it shot the scroll position to the top of the page (WTF?!). So, I went to go debug the problem by tabbing through an example page in Firefox, and this is what I saw:
I didn’t even know what to make of that. It was like some elements you could tab to but not others? You can tab to <button>
s but not <a>
s? Uhhhhh, that doesn’t seem right that you can’t tab to links in Firefox?
After searching and asking around, it turns out it’s this preference at the OS level on macOS.

If you have to turn that on, you also have to restart Firefox. Once you have, then you can tab to things you’d expect to be able to tab to, like links.
About that bug with the scrolling to the top of the page. See that “Skip Results Iframe” link that shows up when tabbing through the CodePen Embed? It only shows up when :focus
-ed (as the point of it is to skip over the <iframe>
rather than being forced to tab through it). I “hid” it by doing a position: absolute; top: -9999px; left: -9999px
thing (old muscle memory), then removing those values when in focus. For some reason, when tabbed to, Firefox would see those values and instantly jump the page up, even though the focus style moved it back into a normal place. Must have been some kind of race condition thing.
I also found it very silly that Firefox would do that to the parent page when that link was inside an iframe. I fixed it up using a more vetted accessible hiding technique.
The post Proper Tabbing to Interactive Elements in Firefox on macOS appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
About us and this blog
We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.
Request a free quote
We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.
Subscribe to our newsletter!
More from our blog
See all postsRecent Posts
- Introducing…Blog XChange! Contribute Your Knowledge To Our Blog And Get Hero Points Plus Links To Your Site February 26, 2021
- Ensuring the correct vertical position of large text February 26, 2021
- An Interactive Guide to CSS Transitions February 26, 2021