Skip to main content
Back to Home

Skip Links

Accessible skip navigation links that allow keyboard users to bypass repeated content and jump directly to important page sections. Visible only on keyboard focus.

Usage

Press Tab on this page to see skip links appear at the top.

Tip: Press the Tab key to see skip links appear at the very top of this page. These links are always present but only become visible when focused, helping keyboard users navigate efficiently.
import { SkipLinks } from '@a13y/react';

function Layout() {
  return (
    <>
      <SkipLinks
        links={[
          { href: '#main', label: 'Skip to main content' },
          { href: '#nav', label: 'Skip to navigation' },
          { href: '#footer', label: 'Skip to footer' }
        ]}
      />

      <nav id="nav">...</nav>
      <main id="main">...</main>
      <footer id="footer">...</footer>
    </>
  );
}

How It Works

Skip links are positioned off-screen but move into view when focused.

  1. 1.Skip links are placed at the very beginning of the page (before the header)
  2. 2.By default, they are visually hidden (positioned off-screen) but remain in the tab order
  3. 3.When a keyboard user presses Tab, the first skip link receives focus and becomes visible
  4. 4.Pressing Enter on a skip link smoothly scrolls to the target section and moves focus there

SkipLinks Props

NameTypeDefaultDescription
links*SkipLink[]-Array of skip link targets
classNamestring-Optional CSS class for the skip links container

SkipLink Props

NameTypeDefaultDescription
href*string-Target element ID (with # prefix)
label*string-Text displayed in the skip link

Accessibility Features

  • ✓Visible only on keyboard focus, invisible to mouse users
  • ✓First focusable elements in the tab order
  • ✓Smooth scroll to target sections
  • ✓Focus management - moves focus to target element after navigation
  • ✓High contrast styling for visibility

Best Practices

Common Skip Link Targets

  • • Main content area
  • • Primary navigation
  • • Search functionality
  • • Footer content

Implementation Tips

  • • Place skip links as the first elements in your HTML
  • • Ensure target elements have IDs that match the href values
  • • Use descriptive labels that clearly indicate where the link goes
  • • Test with keyboard navigation to verify links work correctly