skip link + :focus

The link only keyboards ever meet

CaveatThe two natural ways to hide something — display: none and visibility: hidden — are exactly the ways that make an element unfocusable, and an unfocusable skip link can never receive the Tab press that is supposed to reveal it. Park it off-screen with a transform instead and bring it back on :focus. It has to be the first focusable thing in the document, before the logo link, or the keyboard walks the whole header first and the link skips nothing. And the target wants tabindex="-1": the id alone scrolls the page, but in several browsers sequential focus stays where it was, so the next Tab lands right back in the navigation that was just skipped.

FallbackNothing here is newer than an anchor, a transform and a focus style, so there is no engine to fall back for. The failure modes are all self-inflicted: hiding it with the wrong property, hiding it forever by forgetting the :focus rule, or animating its entrance so hard that a screen-magnifier user never finds where it landed — which is why the transition above is short, and gone entirely under reduced motion.

<!-- first focusable thing -->
<a class="skip" href="#main">
  Skip to content</a>
…
<!-- id scrolls, tabindex moves
     the actual focus -->
<main id="main" tabindex="-1">

.skip {
  position: absolute;
  translate: 0 -200%;
}
.skip:focus { translate: 0 0; }

Published 2 Sep 2026