Introduction

Skip Links Explained

4 min read
View contents

Skip Links: Providing Shortcuts to Main Content

Introduction

Skip links are hidden navigation shortcuts that allow keyboard users to bypass repetitive content—like headers and navigation menus—and jump directly to the main content. WCAG 2.4.1 (Bypass Blocks) requires websites to provide a mechanism to skip content that repeats across pages, making skip links a Level A accessibility requirement.

Without skip links, keyboard users must tab through dozens of navigation links on every page before reaching the actual content. This creates a frustrating, time-consuming experience that makes websites essentially unusable for keyboard-dependent users.

The Basic Concept

Skip links are anchor links that:

  1. Appear as the first focusable element on the page
  2. Are visually hidden until focused
  3. Link to the main content area
  4. Allow users to bypass repetitive navigation
<!-- First element in the body -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Navigation that gets skipped -->
<header>
  <nav>
    <!-- 20+ navigation links -->
  </nav>
</header>

<!-- Target of the skip link -->
<main id="main-content">
  <!-- Page content -->
</main>

Who Benefits

User Type Benefit
Keyboard users Skip to content without tabbing through navigation
Screen reader users Jump past repetitive elements
Switch device users Reduce number of actions needed
Motor disability users Fewer keystrokes to reach content
Power users Quick navigation shortcut

WCAG Requirements

2.4.1 Bypass Blocks (Level A)

A mechanism must be available to bypass blocks of content that are repeated on multiple pages. This can be achieved through:

  1. Skip links - Most common method
  2. Proper heading structure - Screen readers can navigate by headings
  3. ARIA landmarks - regions, navigation, main, etc.
  4. Expandable navigation - Collapsible menus reduce tab stops

Why Level A?

Bypass mechanisms are Level A (minimum compliance) because without them, keyboard users face a significant barrier on every single page. It’s one of the most fundamental accessibility requirements.

<!-- BAD: No skip link at all -->
<body>
  <header>
    <nav><!-- 30 links --></nav>
  </header>
  <main>Content</main>
</body>
<!-- Keyboard users must tab through all 30 links -->

<!-- BAD: display:none hides from everyone -->
<a href="#main" style="display: none;">Skip to content</a>

<!-- BAD: visibility:hidden also inaccessible -->
<a href="#main" style="visibility: hidden;">Skip to content</a>

<!-- BAD: Target ID doesn't exist -->
<a href="#main-content">Skip to content</a>
<main id="content"><!-- Wrong ID! --></main>

<!-- BAD: Target not focusable -->
<a href="#main">Skip to content</a>
<main id="main"><!-- No tabindex, may not receive focus in some browsers --></main>

<!-- BAD: Skip link after navigation -->
<nav><!-- Navigation links --></nav>
<a href="#main">Skip to content</a>  <!-- Too late! -->

5. Unclear Skip Link Text

<!-- BAD: Vague text -->
<a href="#main">Skip</a>

<!-- BAD: Technical jargon -->
<a href="#main">Bypass navigation block</a>

<!-- GOOD: Clear and descriptive -->
<a href="#main">Skip to main content</a>

Visibility States

Skip links use CSS to remain hidden until focused:

.skip-link {
  /* Hidden state - positioned off screen */
  position: absolute;
  top: -40px;
  left: 0;

  /* Styling */
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;

  /* Smooth transition */
  transition: top 0.3s;
}

.skip-link:focus {
  /* Visible state - moved on screen */
  top: 0;
}

Focus Behavior

When activated, skip links:

  1. Move keyboard focus to the target element
  2. Scroll the page to show the target
  3. Subsequent Tab moves to next focusable element after target
<!-- Link -->
<a href="#main" class="skip-link">Skip to main content</a>

<!-- Target with tabindex for consistent focus behavior -->
<main id="main" tabindex="-1">
  <h1>Page Title</h1>
  <!-- Content -->
</main>

Some pages benefit from multiple skip options:

<div class="skip-links">
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <a href="#search" class="skip-link">Skip to search</a>
  <a href="#footer-nav" class="skip-link">Skip to footer</a>
</div>
Scenario Skip Links Needed
Simple site Skip to main content
E-commerce Skip to content + Skip to search
News site Skip to content + Skip to categories
Web app Skip to content + Skip to main action

Quick Manual Test

  1. Load the page
  2. Press Tab once
  3. Does a skip link appear?
  4. Press Enter on the skip link
  5. Does focus move to main content?
  6. Press Tab again - are you past the navigation?

What to Verify

  • [ ] Skip link is first focusable element
  • [ ] Skip link becomes visible on focus
  • [ ] Skip link has clear, descriptive text
  • [ ] Target element receives focus
  • [ ] Target element is scrolled into view
  • [ ] Next Tab goes to first link in main content

Tools for Testing

  • Keyboard only - Tab through the page
  • axe DevTools - Checks for skip link presence
  • WAVE - Highlights skip link issues
  • Screen reader - Verify announcement and navigation

Design Considerations

Visual Appearance

Skip links should:

  • Be clearly visible when focused
  • Have sufficient color contrast
  • Use readable font size
  • Not obstruct other content

Animation

/* Smooth appearance */
.skip-link {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

Positioning Options

Position Pros Cons
Top left Expected location May overlap logo
Top center Prominent May shift content
Fixed position Always accessible Covers content

Best Practices Summary

Do Don’t
Make skip link first focusable element Hide with display:none or visibility:hidden
Use clear, descriptive text Use vague text like “Skip” or “Click here”
Add tabindex=“-1” to target Forget to make target focusable
Test with keyboard Assume mouse testing is sufficient
Consider multiple skip links for complex pages Overwhelm users with too many skip options

References

  1. W3C - WCAG 2.2 SC 2.4.1 Bypass Blocks
  2. W3C - Technique G1: Skip Link
  3. WebAIM - Skip Navigation Links
  4. Deque University - Skip Links

Related articles

Related version

Detailed guide

Skip Links Implementation Guide

Skip links are one of the most important accessibility features for keyboard users, yet they're often implemented incorrectly or omitted entirely

Category hub

Hub

Wcag Compliance Hub

Web accessibility ensures that websites and applications can be used by everyone, including people with disabilities

In the same category

Introduction

Keyboard Navigation Explained

Keyboard navigation is the ability to use a website with only a keyboard—no mouse, touchpad, or touchscreen required