Accessible Skip to Content Link — Free HTML CSS JS Snippet

A skip-to-content link is one of the oldest and most consequential patterns in web accessibility, and it is also one of the most commonly implemented incorrectly. Its job is simple: let a keyboard user or screen-reader user bypass a page's repeated navigation, header, and search widgets and jump straight to the unique content of the page, without having to tab through every menu item first. WCAG 2.2 Success Criterion 2.4.1 (Bypass Blocks) requires exactly this mechanism, and it is one of the first things an accessibility audit checks. This snippet implements the pattern correctly: a link that is invisible until it receives keyboard focus, then appears clearly at the top of the viewport with a high-contrast, unmistakable focus style.

The bug class this snippet avoids

The single most common mistake in skip-link implementations is hiding the link with display: none or visibility: hidden. Both properties remove an element from the accessibility tree entirely — a screen reader will never announce it, and more critically, a hidden element with display: none cannot receive focus at all, so a sighted keyboard user pressing Tab will simply skip over it as if it does not exist. The link becomes permanently unreachable rather than temporarily hidden, which defeats its entire purpose while still satisfying a naive "is there a skip link in the HTML" checklist item. This is exactly the kind of accessibility bug that passes a cursory code review and fails every real assistive-technology test.

The correct technique: absolute positioning off-screen

This snippet instead uses position: absolute with top: -48px to push the link above the visible viewport while keeping it fully present in the layout and, crucially, in the tab order and accessibility tree. Because the element is still rendered (just positioned outside the visible area), a screen reader announces it in document order exactly like any other link, and pressing Tab from the top of the page moves focus to it normally. The reveal happens entirely through the :focus pseudo-class: .skip-link:focus { top: 12px; } animates the link back into the viewport with a transition: top 0.2s ease, paired with a strong outline: 3px solid #6366f1 so sighted keyboard users get an unmistakable visual cue that focus has landed somewhere new. The moment focus moves away — either by tabbing onward or activating the link — it slides back off-screen.

Why the destination needs `tabindex="-1"`

Activating the skip link needs to do more than change the URL hash; it needs to move actual keyboard focus to the main content landmark so the very next Tab press continues from there, not from the top of the page again. The <main id="main-content" tabindex="-1"> element is not naturally focusable — only interactive elements like links, buttons, and form fields are — so tabindex="-1" is added specifically to make it a valid, though not tab-reachable, focus target. The JavaScript calls mainContent.focus() on click, which combined with the browser's native hash-jump from href="#main-content" produces the complete bypass behaviour: the viewport scrolls to the content and keyboard focus lands there simultaneously.

Why this matters for 2026 accessibility-first design

Accessibility-first design is no longer a compliance checkbox tacked on before launch — regulatory pressure (the European Accessibility Act, ADA Title II digital rules, WCAG 2.2 as the emerging baseline) and genuine product quality expectations have made keyboard and screen-reader usability a first-class design requirement from day one. A skip link is one of the highest-leverage accessibility investments a page can make: it costs almost nothing to build correctly, and it directly determines whether keyboard and assistive-technology users can efficiently use a site with a large navigation, or whether every single page load costs them dozens of extra keystrokes. Getting the off-screen mechanic right, rather than reaching for display: none, is the difference between a pattern that looks done and one that actually works.