Skip Navigation Links: The 10-Minute Accessibility Win

There’s a small test that tells you a lot about a website. Load any page, put the mouse aside, and press the Tab key. Then keep pressing it until you reach the actual content. On most sites this takes a while. Tab lands on the logo, then the first menu item, then the second, then a dropdown, then another dropdown, then the search box, then the account icon, and somewhere around press twenty or thirty you finally arrive at the headline you could see the entire time.

Now imagine doing that on every single page. You read an article, click a link, and the toll booth resets: twenty presses through the same menu before you can read again. If you use a mouse, this problem is invisible, because a mouse teleports. You point at what you want and you’re there. The keyboard doesn’t teleport. It walks, one element at a time, in the order the page defines. And a lot of people navigate the web this way: people who can’t use a mouse because their hands don’t cooperate, blind people whose screen readers are driven from the keyboard, people with a broken trackpad, and programmers who simply prefer it.

The fix has been known for decades and it’s called a skip link. It’s a link, placed as the very first thing in the page, that says “Skip to main content” and jumps directly to where the content starts. One press of Tab, one press of Enter, and you’re past the toll booth. That’s the entire feature. The formal name for the requirement, if you go looking in WCAG, is “bypass blocks,” which is bureaucratic phrasing for a humane idea: don’t make people trudge through the same repeated stuff on every page to get to the thing they came for.

The implementation is almost insultingly simple, which is part of why I like it. You add an anchor at the top of the body pointing at your main content: a link with an href of “#main,” where “main” is the id of the element that holds your content, ideally the main element itself, since that’s what it’s for. Then, because designers reasonably don’t want a stray link sitting above the logo, you hide it with CSS in a particular way: position it off-screen by default, and bring it back on-screen when it receives keyboard focus. Sighted mouse users never see it. Keyboard users see it appear the moment they press Tab, exactly when they need it. There is one classic mistake to avoid here, which is hiding the link with display:none or visibility:hidden. Those don’t just hide the link, they remove it from keyboard navigation entirely, so the skip link exists in your source code and helps no one. Off-screen positioning, visible on focus. That’s the trick.

There’s a second, subtler mistake: the link jumps somewhere, but focus doesn’t follow, or the target doesn’t exist because someone renamed the id during a redesign. In some browsers, jumping to a plain container scrolls the view but leaves keyboard focus where it was, so the next Tab press dumps the user right back into the menu. The robust version gives the target a tabindex of -1, which makes it focusable by script and by link without adding it to the normal Tab order. And you should actually test the thing, which takes fifteen seconds: load the page, press Tab, see the link appear, press Enter, press Tab again, and confirm you’re now moving through content links rather than menu links.

Whenever I audit a site by hand, this is one of the first things I check, and it’s one of the checks GazeSite runs automatically, because it’s a strangely honest signal. It costs almost nothing to get right, it’s invisible unless you look, and its absence means nobody on the team has ever pressed Tab on their own site. That last part is what the check really measures. A missing skip link is rarely the worst accessibility problem on a page, but it’s the most predictive one. Sites without a skip link almost always have unlabeled buttons and focus traps too, for the same underlying reason: nobody looked.

I call this a ten-minute win and I mean the ten minutes literally. One anchor, one id, a few lines of CSS, a fifteen-second test. But the real reason I recommend starting here isn’t the ten minutes. It’s that accessibility work tends to die of ambition. Someone reads the guidelines, sees hundreds of criteria, estimates a quarter of remediation work, and the whole thing gets filed under “someday.” A skip link breaks that paralysis. It’s small enough to ship today, concrete enough to verify yourself, and once you’ve pressed Tab on your own site you can’t unsee what it’s like to navigate without a mouse. The skip link is rarely the end of what you fix. It’s just the cheapest possible beginning, and beginnings are the expensive part.

So: press Tab on your homepage right now. If nothing labeled “skip” appears, you know what your next ten minutes are for.