Goal
Provide a way for users — especially keyboard and screen reader users — to bypass repetitive content such as headers, navigation menus, or advertisements, and go directly to the main content of the page.
Key Points
- Users shouldn’t have to tab through the same navigation links on every page.
- Common bypass methods:
- “Skip to main content” link (most common)
- Landmark roles like
main,nav,header, andfooter - Heading structure for screen reader navigation
- The bypass mechanism must be keyboard accessible and visible when focused.
Short Summary
Make it easy to jump past repeated blocks of content and reach the main section quickly — essential for efficiency and accessibility.
Example Issue and Fix
Repetitive navigation without bypass
Fail
<div class="flex w-full flex-col items-center justify-center gap-4 p-8 text-center">
<header class="bg-blue-600 p-4 text-white">
<nav class="space-x-4">
<a href="#" class="hover:underline">Home</a>
<a href="#" class="hover:underline">About</a>
<a href="#" class="hover:underline">Services</a>
<a href="#" class="hover:underline">Contact</a>
</nav>
</header>
<main class="p-6">
<h1 class="!mt-0 mb-4 text-2xl font-bold">Welcome to Our Website</h1>
<p class="!m-0">Page content starts here...</p>
</main>
</div>
Welcome to Our Website
Page content starts here…
Pass
<div class="relative overflow-hidden flex w-full flex-col items-center justify-center gap-4 p-8 text-center">
<a href="#main-content" class="absolute top-2 left-2 -translate-y-20 rounded bg-blue-700 px-4 py-2 text-white transition-transform focus:translate-y-0 focus:ring-2 focus:ring-yellow-400 focus:outline-none"> Skip to main content </a>
<header class="bg-blue-600 p-4 text-white">
<nav class="space-x-4">
<a href="#" class="hover:underline">Home</a>
<a href="#" class="hover:underline">About</a>
<a href="#" class="hover:underline">Services</a>
<a href="#" class="hover:underline">Contact</a>
</nav>
</header>
<main id="main-content" class="p-6" tabindex="-1">
<h1 class="!mt-0 mb-4 text-2xl font-bold">Welcome to Our Website</h1>
<p class="!m-0">Page content starts here...</p>
</main>
</div>
Quick Checklist
- “Skip to main content” link is provided and visible on focus
- Main content area has a unique target ID (e.g.,
#main-content) - Page uses semantic landmarks:
<main>,<nav>,<header>,<footer> - The skip link works with keyboard navigation and screen readers
- The link appears visually when focused, not always hidden
- No inline or unsafe JavaScript (CSP-safe)