Skip link

A “skip to main content” link. It is visually hidden until a keyboard user focuses it, letting them jump past repeated navigation straight to the main content.

Place it as the first focusable element inside body, and give your main content a matching id:

          
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <main id="main-content">
    <!-- ... -->
  </main>
</body>

To see it: tab into the box below using your keyboard — the skip link appears in the top-left corner.

[Tab into this box to reveal the skip link]

Accessibility

The skip link is itself an accessibility feature, expected on pages with repeated navigation so keyboard and screen-reader users do not have to tab through it on every page.

It is moved off-screen until focused — not hidden with display: none, which would remove it from the tab order — and becomes visible with a clear focus outline when a keyboard user tabs to it.

Classes

skip-link: The skip link. Apply to an anchor whose href points to the id of your main content element.