consolelog.tools logo

Skip Link Generator

Generate skip navigation links for keyboard accessibility

Configure Skip Links

HTML

<!-- Skip Links - Add at the very start of <body> -->
<div class="skip-links">
    <a href="#main-content" class="skip-link">Skip to main content</a>
</div>

CSS

.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1.5rem;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid #fff;
}

.skip-link:focus {
  left: 0;
  background: #fff;
  color: #000;
  border-color: #000;
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  z-index: 10000;
}

WCAG Benefits

Skip links help users comply with:
- WCAG 2.1 Level A - 2.4.1 Bypass Blocks
- Section 508 - 1194.22(o) Skip Navigation

Benefits:
- Keyboard users can skip repetitive navigation
- Screen reader users can jump to main content quickly
- Improves efficiency for power users
- Required for WCAG Level A compliance

Implementation

Implementation Steps:

1. Add skip links HTML at the very beginning of <body>:
   <!-- Skip Links - Add at the very start of <body> -->
<div class="skip-links">
    <a href="#main-content" class="skip-link">Skip to main content</a>

2. Add the CSS to your stylesheet

3. Ensure skip link targets exist and are focusable:
   <main id="main-content" tabindex="-1">

4. Test:
   - Press Tab key when page loads
   - Skip link should be first focusable element
   - Clicking skip link should move focus to target
   - Target should scroll into view

5. Optional: Add smooth scroll behavior:
   html {
     scroll-behavior: smooth;
   }

Skip Link Best Practices

Essential Practices

  • •Skip link must be the first focusable element on the page
  • •Skip link target must be focusable (add tabindex="-1" if needed)
  • •Target should scroll into view when focused
  • •Skip link should be visible when focused
  • •Provide multiple skip links for complex layouts
View example
<body>
  <a href="#main-content" class="skip-link">
    Skip to main content
  </a>
  <!-- Navigation, header, etc. -->
  <main id="main-content" tabindex="-1">
    <!-- Main content -->
  </main>
</body>

Multiple Skip Links

  • •For complex sites, provide skip to: main content, navigation, search, footer
  • •Group skip links together at the start of the page
  • •Keep skip link text concise but descriptive
  • •Use landmarks (main, nav) as skip targets when possible
View example
<div class="skip-links">
  <a href="#main-content">Skip to main content</a>
  <a href="#navigation">Skip to navigation</a>
  <a href="#search">Skip to search</a>
  <a href="#footer">Skip to footer</a>
</div>

Styling Guidelines

  • •Position off-screen or visually hidden by default
  • •Make visible and prominent when focused
  • •Ensure sufficient color contrast (4.5:1 minimum)
  • •Use clear, readable font size (16px minimum)
  • •Provide adequate padding/click area (44x44px minimum)
View example
.skip-link {
  position: absolute;
  left: -9999px;
  padding: 0.75rem 1.5rem;
  background: #000;
  color: #fff;
}

.skip-link:focus {
  left: 0;
  top: 0;
  z-index: 9999;
  outline: 3px solid #0066cc;
}

Target Implementation

  • •Skip link targets should have id attributes
  • •Add tabindex="-1" to non-interactive targets
  • •Use semantic landmarks (main, nav) when possible
  • •Ensure target is actually the start of that content section
  • •Remove focus outline on non-interactive targets after focus moves
View example
<main id="main-content" tabindex="-1">
  <h1>Page Title</h1>
  <!-- Main content -->
</main>

<script>
  // Remove focus outline after programmatic focus
  document.getElementById('main-content')
    .addEventListener('blur', function() {
      this.removeAttribute('tabindex');
    });
</script>

Testing Checklist

  • •Tab key focuses skip link first
  • •Skip link is visible when focused
  • •Activating skip link moves focus to target
  • •Page scrolls to show target
  • •Works in all major browsers
  • •Test with screen readers (NVDA, JAWS, VoiceOver)

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Frequently Asked Questions - Skip Link Generator