[Go Make Things] Tabindex, programmatic focus, and outline styles

By rahmat hidayat

Tuesday, May 6, 2025

​ Today's newsletter is sponsored by ConfigCat — the feature flag service that helps you release features faster and with less risk. More on them at the end of today's newsletter. For accessibility reasons, I sometimes need to programmatically focus on elements that would not normally be focusable. Two noteable examples… Skip Nav links Shifting focus to the h1 heading in an SPA after a route change In both examples, you need to add a [tabindex] attribute with a value of -1 to the element in order for it to receive focus. <a href="#main">Skip to Main Content</a> <!-- Nav Menu Stuff... --> <main id="main" tabindex="-1"> <!-- ... --> </main> By default, when the content in question receives focus, it gets a big blue focus ring around it. That ring is an important visual indicator about what has focus for people who navigate by keyboard. But it can look "off" for focus who navigate with a mouse. (This is generally a bigger issue with SPAs and heading focus than a skip nav link, which is typically only used by keyboard users.) To "fix" this without breaking accessibility for people who navigate with a keyboard, you can hide the outline on :focus, and include it on :focus-visible instead. /** * Only style programmatically focused elements if needed * @link https://code.google.com/p/chromium/issues/detail?id=37721 */ [tabindex="-1"]:focus { outline: none; } [tabindex="-1"]:focus-visible { outline: 2px solid var(--color-focus); } This pseudo-class gets applied to an element when the browser/User Agent determines (based on user heuristics or behavior) that they would benefit from visible focus indicators. In my experience, if the behavior that triggered the focus event was triggered by a mouse, :focus-visible is not applied. If it was triggered by a keyboard, it is. Are you looking for a service to support dynamic feature flags? ConfigCat is a cross-platform LaunchDarkly alternative that's easy to learn and quick to set up. With SDKs for 19 platforms — including JavaScript, Python, Ruby, Java, and even Rust — you can toggle features on or off without redeploying. ConfigCat subscriptions are the same price regardless of your team size. Get 25% off any paid plan with code GO25 or just use ConfigCat's generous free tier. Definitely worth checking out. Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+ Lintasme