Skip Navigation

A skip navigation link allows keyboard and assistive technology users to bypass repetitive content and jump directly to the main content area.

Demo

Press Tab to move keyboard focus into this page. The skip link will appear at the top of the screen when it receives focus. Press Enter to activate it and observe where focus lands.

What to Observe

• The skip link is invisible until it receives keyboard focus, then becomes fully visible.
• It is always the very first focusable element in the tab order, before any navigation or header content.
• Activating the link moves focus directly to the main content landmark, skipping all repeated header links.
• Screen readers announce the link text and its destination when it receives focus.
• Mouse users are unaffected — the link does not appear during pointer interaction.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Skip link anchor: An <a> element with an href pointing to the main content landmark's ID, placed as the first element in the document body.
2. Visually hidden state: CSS that positions the link off-screen or clips it to zero size until it is focused.
3. Focus-visible state: Styles applied on :focus or :focus-visible that restore the link to a fully visible, high-contrast position on screen.
4. Target landmark: The <main> element (or a container with an appropriate id) that the link points to and where focus lands after activation.

Accessibility Behavior

• The skip link must be the first focusable element on the page, appearing before the site header and navigation.
• The link must become visible when it receives keyboard focus so sighted keyboard users can see and activate it.
• Activating the link must move focus to the main content area, not just scroll the page visually.
• The link text must clearly describe the destination, such as "Skip to main content."
• The target element must be reachable by the browser's focus mechanism — if it is a non-interactive element, it must have tabindex="-1" to accept programmatic focus.
• The link must remain operable when CSS is disabled or overridden by user stylesheets.

Common Mistakes

• Making the link permanently hidden with display: none or visibility: hidden, which removes it from focus order entirely.
• Placing the skip link after other focusable elements, so users must tab through navigation before reaching it.
• Scrolling the page to the target visually but failing to move keyboard focus, leaving screen reader and keyboard users stranded at the top.
• Using vague link text such as "Skip" without indicating the destination.
• Targeting an element that cannot receive focus, causing the link to appear broken when activated.

Why This Matters

Keyboard-only users and screen reader users must navigate through every link and interactive element in the site header before reaching the page's main content — on every single page load. Without a skip link, a user with motor disabilities or someone relying on a switch device may have to press Tab dozens of times just to reach the content they came for. This creates a frustrating, time-consuming experience that effectively blocks access to the page. A properly implemented skip link solves this with a single keypress and costs almost nothing to build.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code