SkipLink

Introduction

The SkipLink 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.

Required markup

Your page must have either an element with id="main-content" or an <h1> element for the skip link to work properly.

When to use

A SkipLink is essential for keyboard navigation in these scenarios:

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

Usage

Learn how to implement the SkipLink component in your project:

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

<SkipLink />

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

Best practice

Place the SkipLink component as the first focusable element on your page, before any navigation or content. Preferably in the head section of your document.

Props

Prop	Type	Default	Description
text	string	'Skip to main content'	Custom text for the skip link
target	string	'#main-content'	Target element ID to skip to
class	string	''	Additional CSS classes to apply

Accessibility

Accessibility isn’t an afterthought - it’s built into the core of this component through semantic HTML elements and proper ARIA attributes. The SkipLink component is built with accessibility in mind:

• 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

Styling

Make the SkipLink component your own while maintaining its accessibility features.

Accessibility considerations

When customizing styles, ensure you maintain sufficient color contrast ratios and don’t remove focus indicators.

Custom CSS

/* Option 1: Using :global() in your style block */
<style>
  :global(.skip-link a) {
    position: absolute;
    z-index: 9999;
    inset-block-start: -100vh;
    inset-inline-start: 0;
    padding-block: 1rem;
    padding-inline: 3.25rem;
    border-end-end-radius: 0.5rem;
    background: light-dark(hsl(0 0% 100%), hsl(215 25% 15%));
    color: light-dark(hsl(215 25% 27%), hsl(215 25% 89%));
  }

  :global(.skip-link a:hover),
  :global(.skip-link a:focus-visible) {
    inset-block-start: 0;
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }
</style>

/* Option 2: Using is:global on the style tag */
<style is:global>
  .skip-link a {
    position: absolute;
    z-index: 9999;
    inset-block-start: -100vh;
    inset-inline-start: 0;
    padding-block: 1rem;
    padding-inline: 3.25rem;
    border-end-end-radius: 0.5rem;
    background: light-dark(hsl(0 0% 100%), hsl(215 25% 15%));
    color: light-dark(hsl(215 25% 27%), hsl(215 25% 89%));
  }

  .skip-link a:hover,
  .skip-link a:focus-visible {
    inset-block-start: 0;
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }
</style>

Tailwind Classes

<SkipLink
  class="absolute z-50 -top-full left-0 p-4 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:top-0 focus:outline-none focus:ring-2 focus:ring-offset-2"
/>

Style scoping

Astro components use scoped styles by default. To override component styles, you’ll need to use either :global() selectors or the is:global directive on your style tag.

Interactive example

See the SkipLink component in action:

Demo note

The styles for this component are changed so it’s visible on the page, this is purely for demonstration purposes. Normally, it’s hidden and appears on the top left corner of the page when focused.

Skip to main content