FeaturesPricingAudit GuideFree StatementDashboard →

Add Skip Navigation Links

Learn how to implement skip navigation links to help keyboard users bypass repetitive content. Includes code examples.

6 min read
moderate severityWCAG Level AWCAG 2.1 Success Criterion 2.4.1Manual review needed

What Is It?

A skip link is an anchor link that's hidden by default but becomes visible when focused via keyboard. Clicking it jumps focus to main content. It's usually the first focusable element on the page.

Affected users: Keyboard users, motor disability users, screen reader users, users with cognitive disabilities who appreciate reduced cognitive load

Why It Matters

Keyboard users who visit multiple pages must Tab through the entire navigation menu on each page. Skip links let them jump to main content immediately. Users with motor disabilities appreciate reducing keystrokes.

How to Detect This Issue

Press Tab on page load. Check if skip link appears and is visible. Click/press Enter and verify focus moves to main content area. Check with screen readers.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<body>
  <header>
    <nav><!-- navigation --></nav>
  </header>
  <main><!-- content --></main>
</body>
After (accessible)
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <header>
    <nav><!-- navigation --></nav>
  </header>
  <main id="main-content"><!-- content --></main>
</body>

The skip link is the first focusable element. It links to the id of the main content area. CSS hides it visually until focused.

React / Next.js

Before
export default function Layout({ children }) {
  return (
    <>
      <Nav />
      <main>{children}</main>
    </>
  );
}
After
export default function Layout({ children }) {
  return (
    <>
      <a href="#main" className="skip-link">Skip to main content</a>
      <Nav />
      <main id="main">{children}</main>
    </>
  );
}

Add skip link as first element in layout. Use className for styling. Link href should match the id of main content element.

WordPress

Before
<body>\n<?php wp_body_open(); ?>\n<header>...</header>
After
<body>\n<?php wp_body_open(); ?>\n<a href="#main-content" class="skip-link">Skip to main content</a>\n<header>...</header>\n<main id="main-content">

Add skip link in wp_body_open hook or at top of header.php. Ensure main content area has id="main-content".

Shopify Liquid

Before
<body>\n  {% section 'header' %}\n  <main>{{ content_for_layout }}</main>
After
<body>\n  <a href="#content" class="skip-link">Skip to main content</a>\n  {% section 'header' %}\n  <main id="content">{{ content_for_layout }}</main>

Edit Shopify theme liquid files. Add skip link in theme.liquid or header section. Ensure id matches href.

Common Mistakes

✗

Making skip link visible all the time (looks cluttered)

✗

Skip link doesn't actually move focus to main content

✗

Main content area doesn't have matching id attribute

✗

Skip link only added to homepage, not all pages

✗

Using display: none instead of sr-only class (display: none makes link non-functional)

Frequently Asked Questions

Where should the skip link go?
First focusable element on the page, before navigation. Make it the first <a> tag in the <body>, preferably right after opening <body> tag.
How do I hide the skip link visually?
Use the sr-only class pattern: .skip-link { position: absolute; left: -9999px; } OR use clip: rect(1px,1px,1px,1px); Better: show on focus with :focus pseudo-class.
Should I have multiple skip links?
Typically one main skip link is enough. Some complex sites have skip links to sections (e.g., Skip to Products, Skip to Footer), but avoid too many.
Do skip links break browser back button?
No, if implemented with # anchors properly. When user clicks skip link and navigates elsewhere, clicking back returns to previous page, not pre-skip state.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides