Lesson 12 / 25

Skip links

Let keyboard users skip repetitive content to reach main content.

Why skip links matter

If every page loads a 50-item nav menu, keyboard users tab through all 50 to reach content. Skip link jumps them to main. It's also good UX for screen reader users.

Implementation

Place skip link at the top of HTML, hide it off-screen, show on focus.

<!-- At the very top of <body> -->
<a href="#main" class="skip-link">Skip to main content</a>

<style>
  .skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .skip-link:focus {
    top: 0;
    left: 0;
    z-index: 9999;
    background: #000;
    color: white;
    padding: 10px;
  }
</style>

Multiple skip links

Large sites may have multiple skip links: skip to main, skip to sidebar, skip to footer.

Skip link best practices

Make skip links visible on focus. Use clear, action-oriented text. Test skip links work with screen readers too.