DEV Community

OnePassApps
OnePassApps

Posted on

The Skip Link on All 22 App Routes: Focus Lands on the Panel, and the URL Never Changes

I work on OnePassApps, so this is our own site: app.onepassapps.com. This post is about one small thing a keyboard user meets on every app page - the Skip to content link - and about what actually happens when it is pressed.

An earlier post on this account, Driving the OnePassApps Studios With a Keyboard, measured the Studio pages. This one measures the app pages.

How this was measured

All 22 live app routes - the /apps/ paths in our sitemap - one signed-out session, the browser on our own machine, 9 November 2026. Focus moved with real Tab and Enter key events, never by calling focus() from a script, so every order below is the order a keyboard user gets. Each route was reloaded once before it was measured, so every figure comes from a page whose app panel was live: the rendered text of the working area ran from 444 characters on MovieMatcherAI to 4,892 on NewsFlow.

Every route carries exactly one skip link

On all 22 routes there is exactly one link whose text is Skip to content, and on all 22 its href is #main. The target exists on every route, there is exactly one main element on every route, and that element carries the id main and tabindex="-1" - the attribute that lets it take focus at all.

Pressing it moves focus into the panel

The link was reached with Tab and pressed with Enter. On all 22 routes the focused element afterwards was the main element itself, id main. The skip link does its job: it hands focus past the shell and into the app's working area.

The URL never changes

This is the part I did not expect. On all 22 routes the address-bar fragment was empty before the press and empty after it. The skip link moves focus without recording the position in the URL, and the page did not scroll either - scroll position was 0 before and 0 after on every route.

What comes before the skip link

The skip link is never the first Tab stop. On every route at least three stops come first, and on some routes as many as seven. They are the fallback card's Reload link, its support-address link and some unnamed controls - the fallback shell that our served HTML carries, measured in The Control Layer of app.onepassapps.com.

And nine shell stops after it

Pressing the skip link does not put focus on the app's first control. The stops that follow belong to the shell: the app's own link in the nav, then the promotion notice's Get started, See plans and Dismiss free promotion notice in the aside, then Collapse side bar, Tools, Search everything…Ctrl K, Help and Ask Sam. On two routes - MovieMatcherAI and NewsFlow - Tools is Live apps instead.

Only then does the app's own first control arrive: the 10th stop after the skip link on 19 of the 22 routes, and the 11th on Password Generator, which carries an extra Account, not signed in link. That first control is a different thing on every route - Steady hush on Ambient Noise Mixer, Paste CSV on Chart Maker, Add PDFs on PDF Organiser, Headline on Social Preview Designer, Load example script on Browser Teleprompter, and on Word Counter the textarea that reads Paste or type your text….

Two routes I will not put a number on: on Email Signature Builder and Invoice Maker the first app fields are inputs whose accessible name comes from a wrapping label element rather than from their own attributes, so my tab walk read them as unnamed and I am not claiming a count for those two. A separate accessible-name pass over the DOM on both routes found named fields - Full name, Job title, Company on the first, Choose invoice JSON file, Name or business on the second - so the fields themselves are named; what I could not pin down was where they sit in the tab walk.

The focused panel carries no outline of its own

One last measurement, because it is what a sighted keyboard user would notice. The computed outline style of the focused main element is none on all 22 routes, and its box-shadow is none as well. Focus does land on the panel, but the panel itself is not marked by an outline or a shadow.

What I did not do

No screen reader was run. I did not compare any focus ring against a screenshot. I did not test the skip link on the Studio pages, the guides or the home page - only the 22 app routes. One build, one session, one day.

Try it

Open an app, press Tab a few times until the skip link is focused, and press Enter: open Word Counter, or start from the app guides.

Top comments (0)