Recipe

Skip-to-content link patterns

A hidden link that becomes visible on focus, letting keyboard users bypass repetitive navigation and jump directly to the main content.

Core pattern

<a href="#main" class="sr-only focus:not-sr-only
  focus:fixed focus:top-4 focus:left-4 focus:z-50
  focus:px-4 focus:py-2 focus:bg-violet-600
  focus:text-white focus:rounded-md">
  Skip to content
</a>

Tailwind utility

Combine sr-only withfocus:not-sr-only. On focus, position the link fixed at the top-left with a high z-index so it overlays everything.

Target anchor

Add id="main-content" to your <main> element. The browser scrolls to it and sets focus, skipping the nav.

WCAG notes

Meets SC 2.4.1 Bypass Blocks (Level A)
Must be the first focusable element in the DOM
Visible focus ring is required — never hide outlines
Test with Tab key, not just screen readers