Skip to content
GreenSnippets

Accessible skip-to-content link

Let keyboard users jump past repeated navigation straight to the main content.

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

<header>…site navigation…</header>

<main id="main" tabindex="-1">
  <h1>Page title</h1>
</main>

<style>
  .skip-link {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    padding: 0.5rem 1rem;
    background: #000;
    color: #fff;
  }
  .skip-link:focus {
    top: 0.5rem;
  }
</style>

How it works

Keyboard users otherwise tab through the whole header on every page. The skip link is the first focusable element, becomes visible on focus, and targets the main landmark. Give main a tabindex="-1" so focus actually moves there in all browsers.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets