Skip Link

Purpose

Skip links allow keyboard and screen reader users to bypass blocks of content that are repeated on every page (such as the site header and navigation) and jump directly to the main content.

Usage Guidance

• Place the skip link as the very first element inside <body>
• Target the <main> element or a container with id="main-content"
• The skip link should be visible when focused (not permanently hidden)
• One skip link targeting main content is sufficient for most sites; complex pages may benefit from additional skip links

Accessibility Considerations

• The target element must have id="main-content" (or whatever href the skip link uses)
• If the target is not natively focusable, add tabindex="-1" so it accepts focus
• The skip link must become visible when focused (not permanently hidden off-screen)
• WCAG 2.2 Success Criterion 2.4.1 requires a mechanism to bypass blocks of repeated content

Keyboard Support

Screen Reader Behavior

Screen readers users access skip links in the tab order like any other link. Many screen reader users navigate by landmark, which may make skip links less necessary but they are still required by WCAG.

ARIA Requirements

No ARIA is required. The <a> element with an href pointing to a fragment is sufficient.

Common Mistakes

• Hiding the skip link permanently (with display:none or visibility:hidden)
• Pointing to a target without an id
• Pointing to a non-focusable target without tabindex="-1"
• Placing the skip link after other focusable elements in the DOM

Live Example

The skip link on this site is the first element in the <body>. Press Tab on any page to see it appear at the top-left of the viewport.

Code Example

<!-- In <body>, before anything else: -->
<a class="skip-link" href="#main-content">Skip to main content</a>

<!-- At the start of main content: -->
<main id="main-content" tabindex="-1">
  <!-- Page content -->
</main>

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: #0d2b4e;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0.5rem;
  border: 2px solid #fff;
  transition: top 150ms ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #d4700a;
  outline-offset: 2px;
}