← Docs
Recipe

Skip-link patterns

Let keyboard users jump past repetitive navigation straight to the main content.

The pattern

A visually hidden anchor at the top of the page that becomes visible on :focus. It links to the #main-content element.

Why it matters

  • Screen-reader users navigate by landmarks, not tabbing through 40 nav links.
  • Motor-impaired users save dozens of keystrokes per page load.
  • WCAG 2.1 SC 2.4.1 (Bypass Blocks) requires a mechanism to skip repeated content.

Implementation

<a href="#main" class="sr-only focus:not-sr-only
  focus:absolute focus:top-4 focus:left-4
  focus:z-50 focus:rounded focus:bg-[#8B5CF6]
  focus:px-4 focus:py-2 focus:text-white">
  Skip to main
</a>

Tailwind's sr-only hides the link visually while keeping it in the accessibility tree.

Testing checklist

  1. Load any page and press Tab — the skip link must appear first.
  2. Press Enter — focus must move to the main content area.
  3. Verify with VoiceOver, NVDA, or JAWS that the link is announced.
  4. Ensure the target has tabIndex="-1" so it receives programmatic focus.

Related recipes

Focus trappingARIA live regions