Add a "Skip to Main Content" Link

Keyboard users should not have to tab through the same navigation on every page before reaching the article. A “Skip to main content” link gives them a direct route past those repeated controls.

The link should be one of the first focusable elements in the document. It can stay visually hidden until it receives keyboard focus, so it does not need to compete with the normal page design.

A small skip-link pattern

Add the link near the start of the page and point it at the main content:

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main content</a>
…
<main id="main" tabindex="-1">
  Main content
</main>

Then move the link offscreen until somebody tabs to it:

/* style.css */
.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: #eee;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

The link is still available to the keyboard even when it is positioned above the viewport. On focus, top: 0 brings it back into view.

tabindex="-1" on the target was needed for consistent focus behaviour in IE and Chrome when this article was written. It allows the main element to receive programmatic focus without adding it to the normal tab order.

The W3C has more detail in its technique for adding a link at the top of each page. The implementation is small, and for navigation-heavy sites it removes a lot of repetitive keyboard work.

← Back to all articles