⏭️Dev

Skip Link Snippet

Takes the id of your main content region and returns the anchor plus CSS for a skip link that stays off-screen until it takes focus (WCAG 2.4.1).

Target id

Snippet

—

The link that skips the menu and disappears

People navigating by keyboard start each page at the top and move Tab by Tab. If the header holds thirty menu links, reaching the content costs thirty presses — on every page of the site. The skip link fixes that: it is the first focusable element in the document, stays invisible until it receives focus and, once activated, jumps straight to the main content.

Enter the id of the element that should receive focus and the page assembles the link along with its CSS. The whole technique lives in that CSS: the link is pushed off screen with absolute positioning far to the left, and the focus rule brings it back to the top corner with a solid background and a high z-index. That is why it cannot be hidden with display none or visibility hidden — both remove the element from the tab order, and then it never receives focus at all.

Two assembly details. The target must exist with that id, usually the main element, and it is worth adding tabindex minus one to it: without that, some browsers move the scroll but not the focus, and the next Tab returns to the start of the menu. And the skip link has to be the first focusable element in the body, before anything in the header — placed after the menu, it skips nothing.

Frequently asked questions

Is this required by any standard?

WCAG success criterion 2.4.1, "bypass blocks", requires a mechanism to skip content repeated across pages, and it is level A — the most basic tier. A skip link is the most common way to satisfy it, but well-structured headings and page landmarks also count as a mechanism.

Why not hide it with display:none?

Because an element with display none or visibility hidden leaves the tab order and cannot receive focus, which defeats the purpose. The pattern is removing it from the visible area while keeping it in the focus flow — through off-screen positioning, as here, or with the clip-path technique.

Do I need more than one skip link?

On a simple page, one is enough. In an application with a long sidebar or an extensive table of contents, two or three are common — skip to content, skip to navigation, skip to search. The caution is not overdoing it: each one occupies a Tab stop for everybody.

Related Tools

🎯

Focus-Visible CSS Snippet

Builds a ready-to-paste :focus-visible rule from an outline colour and a thickness in pixels, with 2px offset, for the WCAG 2.4.7 focus indicator.

🔗

Link Header Parser

Decompose an HTTP Link header (RFC 8288) listing each URI with its parameters (rel, type, title). Useful for paginated APIs and Web Linking.

🎬

prefers-reduced-motion CSS

Builds the @media (prefers-reduced-motion: reduce) block that neutralises animations, transitions and smooth scrolling, page-wide or only inside .anima.

🌐

HTTP Request Builder

Build an HTTP request (URL, method, headers, body) and generate snippets in cURL, fetch, axios, Python requests and Go net/http. Everything in your browser.

💎

Sublime Text Snippet Generator

Create a .sublime-snippet XML file with trigger, scope and content. Drop into Packages/User/ in Sublime.

📝

VS Code Snippet Generator

Build a JSON snippet ready to paste into VS Code *.code-snippets files, with prefix, multi-line body and tabstops $1, $2.