Skip to main content

Skip Link Builder

v1.0.0

Generate accessible skip-link patterns — to main, to nav, with proper focus styling.

Skip Links HTML + CSS
<!-- Place at very top of <body> -->
<nav aria-label="Skip links">
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <a href="#main-nav" class="skip-link">Skip to navigation</a>
</nav>

<!-- Target elements must have matching IDs -->
<main id="main-content" tabindex="-1">...</main>

<!-- CSS -->
<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  z-index: 1000;
  transition: top 0.1s;
}
.skip-link:focus {
  top: 6px;
}
.skip-link {
  /* shared styles */
  background: #000;
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 4px 4px;
  font-weight: bold;
  text-decoration: none;
}
.skip-link:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}
</style>