Skip links are one of those accessibility features most people have heard of. The “Add a skip to main content link” task appears on every accessibility checklist. So website owners dutifully add them, usually as the first focusable element on the page. But do you actually need one? And if you do, are you implementing it in a way that actually helps?
What skip links do
Skip links enable keyboard users to jump past repetitive content, such as navigation, headers, and sidebars, directly to the main content. Without them, keyboard users have to tab through every navigation item on every page load. On a site with 20 navigation items, that’s 20 tab key presses before reaching the content they came for.
When you definitely need them
If your site has substantial navigation before the main content, skip links are essential. E-commerce sites, large corporate sites, news sites, and government sites. Anywhere with complex headers. WCAG 2.4.1 (Bypass Blocks) requires a mechanism to skip repeated content, and skip links are the most common solution.
When you might not need them
Sites where the main content is the first or second focusable element. Blogs with simple navigation (logo, 5 menu items, content). If reaching main content requires fewer than 5-10 tab stops, a skip link adds complexity without much benefit.
Good heading structure helps too
Screen reader users often navigate by headings rather than using skip links. If your main content starts with a proper H1, they can jump directly to it. But keyboard-only users without screen readers still need skip links.
How to implement
Here is a basic example of how to implement skip links properly. Depending on the complexity of your page, you may have multiple skip links that jump to different sections of the page.
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<!-- navigation -->
</header>
<main id="main-content" tabindex="-1">
<!-- content -->
</main>
</body>The skip link should be the first focusable element. It can be visually hidden until focused (common pattern). The tabindex="-1" on the main element ensures focus moves correctly in all browsers.
Test it by actually tabbing to the skip link and activating it. Verify that focus moves to the main content.
Skip links aren’t universally necessary, but they’re essential for keyboard users on sites with complex navigation. If you have more than a handful of focusable elements before the main content, add one.
Don’t Miss Out
Get practical accessibility tips in your inbox every week.