Skip Links

Introduction

The Skip Links component provides a way for keyboard and screen reader users to bypass repetitive navigation elements and jump directly to the main content. It’s a crucial accessibility feature that becomes visible only when focused.

When to use

At the top of every page
Before navigation menus
On pages with repetitive content
Any site that prioritizes keyboard accessibility
Content-heavy websites
Complex navigation structures

Usage

---
import { SkipLinks } from 'accessible-astro-components'
---

<SkipLinks />

<!-- Target element -->
<main id="main-content">
  <h1>Page Title</h1>
  <!-- Your content -->
</main>

Accessibility features

Appears only when focused (visually hidden otherwise)
Provides keyboard-only navigation
Uses high contrast colors for visibility
Clear focus indicators
Semantic HTML structure
Proper focus management
Fallback to <h1> if main content ID is missing
Console warning if neither target is found

.skip-links {
  --action-color: #222;
  --background: #fff;
  --skip-links-padding: 1rem 3.25rem;
  --skip-links-radius: 6px;
}

.skip-links a {
  position: absolute;
  z-index: 9999;
  top: -100vh;
  left: 0;
  padding: 1rem 3.25rem;
  border-bottom-right-radius: 6px;
}

.skip-links a:hover,
.skip-links a:focus {
  top: 0;
  outline-offset: 2px;
}

Interactive example

Tab through this page to see the skip link in action.