Skip to content link

A visually hidden link that slides into view when focused via keyboard, letting users bypass navigation.

Click inside this box, then press Tab to reveal the skip link.

Widely supported

a11y

Quick implementation

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  background: oklch(0.55 0.25 270);
  color: oklch(0.98 0 0);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 0 0 0.5rem 0.5rem;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus-visible {
  top: 0;
  outline: 3px solid oklch(0.75 0.18 270);
  outline-offset: 2px;
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any code-generating model to scaffold the pattern instantly.

Create a "skip to content" accessible link in HTML and CSS.
The link should be the first element inside <body>, with
href="#main-content". Position it absolutely off-screen
(top: -100%). On :focus-visible, animate it to top: 0 with
a short transition. Style it with oklch() colors: a purple
background at oklch(0.55 0.25 270) and white text. Add a
visible outline ring on focus. The link should sit at
z-index: 1000 so it overlays navigation.

Why this matters

Skip links are a WCAG 2.1 Level A requirement (Success Criterion 2.4.1). They allow keyboard and screen-reader users to jump past repetitive navigation blocks straight to the main content. Without a skip link, a keyboard user may need to tab through dozens of nav items on every page load before reaching the content they came for.

The logic

The link is positioned absolutely with top: -100%, moving it completely above the viewport. When the user tabs to it, :focus-visible triggers and sets top: 0, sliding it into view with a short CSS transition. Using :focus-visible instead of :focus ensures the link only appears during keyboard navigation, not on mouse click. The high z-index guarantees it renders above sticky headers and other overlays.

Accessibility & performance

The skip link target (#main-content) should match the id on your <main> element. Screen readers announce the link text, so keep it descriptive: "Skip to content" or "Skip to main content". The short transition respects prefers-reduced-motion users if you wrap it in a media query. Performance impact is zero since the link is a single, lightweight DOM element with no JavaScript dependency.