Designing Skip Navigation Links and Page Landmarks for Keyboard Users

For sighted mouse users, jumping directly to a page's primary article is instantaneous. But for keyboard and screen reader users, navigating past repeated headers, social links, search inputs, and extensive navigation bars requires pressing the Tab key dozens of times on every single page load.

A skip navigation link provides a direct shortcut to the main content, satisfying WCAG 2.4.1 (Bypass Blocks).

Example #

The skip link must be the very first focusable element inside the <body>:

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  
  <header>
    <nav aria-label="Main Menu">...</nav>
  </header>

  <main id="main-content" tabindex="-1">
    <h1>Understanding Skip Links</h1>
  </main>
</body>

Implementation #

The skip link remains visually hidden offscreen until it receives keyboard focus, at which point it slides visibly into view:

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--blue);
  color: #ffffff !important;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
  z-index: 9999;
  transition: top 200ms ease;
}

.skip-link:focus {
  top: 16px;
  outline: 3px solid var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Ensure Safari focuses the target cleanly */
main[tabindex="-1"]:focus {
  outline: none;
}

Main Point: Positioning a focus-triggered skip link as the very first element in <body> drastically improves keyboard navigation efficiency and accessibility compliance.

Credits #

Photo by Simone Hutsch on Unsplash

← Home