Skip link

The skip link is the first focusable element on every page. It sits off-screen until a keyboard user presses Tab, then slides into view and offers a direct jump to the main content, past the header and its navigation.

Press Tab on any page of either site — including this one — and the link appears at the top of the viewport.

When to use#

• Every page, automatically: the base template renders it as the first element in <body>, and individual pages never add their own
• For keyboard and switch users who would otherwise cross the entire header on every page before reaching the content
• One link, one target — it jumps to the main content landmark, not to arbitrary sections

Implementation#

<a class="skip-link" href="#content">{{ i18n "skipToContent" }}</a>

<a class="skip-link" href="#content">Skip to content</a>

The link lives in layouts/_default/baseof.html as the first element inside <body>, before the header partial, and targets the <main id="content"> landmark. The label comes from the skipToContent i18n key. There is no JavaScript and no separate CSS file; the styling is the .skip-link rules in assets/css/site.css — the link is fixed, translated off-screen, and focus-visible translates it back into view. It takes no options.

Accessibility#

• The link is the first focusable element on the page, so a single Tab press reaches it before anything else
• It is a plain <a> with an href; screen readers announce it as an ordinary link, no ARIA required
• It reveals only on focus-visible: mouse users never see it, and keyboard focus slides it into view
• Avoid more than one skip link per page — one link, one main destination