Skip Link

Use skip links to help keyboard users bypass repetitive navigation and jump directly to the main content.

Default Skip Link

The skip link is visually hidden until focused, then appears at the top of the page.

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

<!-- Later in the page -->
<main id="main-content">
  ...
</main>

Implementation

Place the skip link as the first focusable element in your page, immediately after the opening <body> tag.

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <header>
    <!-- Logo, navigation, etc. -->
  </header>

  <main id="main-content" tabindex="-1">
    <h2>Page title</h2>
    <!-- Main content -->
  </main>

  <footer>...</footer>
</body>
</html>

Multiple Skip Links

For complex pages, you might offer multiple skip links.

<div class="skip-links">
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <a href="#navigation" class="skip-link">Skip to navigation</a>
</div>

CSS

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background-color: var(--focus-color);
  color: var(--focus-text-color);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: 0;
}

/* Alternative: use clip for hiding */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-4);
  clip: auto;
  overflow: visible;
}

When to Use

Always include a skip link on every page. It is a WCAG 2.1 Level A requirement (Success Criterion 2.4.1: Bypass Blocks).

Accessibility

Skip links must be the first focusable element on the page
The target element should have tabindex="-1" to receive focus
Skip links must be visible when focused
Use clear, descriptive link text
Ensure sufficient colour contrast when visible

Testing

To test skip links:

Load the page
Press Tab once - the skip link should appear
Press Enter - focus should move to the main content
The skip link should be readable by screen readers

Common Mistakes

Forgetting to add id to the target element
Not making the skip link visible on focus
Placing it after other focusable elements
Using unclear link text like "Skip"