Accessible Skip-to-Content Link
A skip-to-content link lets keyboard and screen-reader users jump past the navigation straight to the main content. Most sites get the markup right but hide it permanently with `display: none`, which screen readers also skip. This snippet covers the visually-hidden-until-focus pattern, the matching CSS to keep it usable, and the required `<main>` target so the link actually works.
989 views
13
<a class="skip-link" href="#main">Skip to main content</a>
<header>
<nav>...site navigation...</nav>
</header>
<main id="main" tabindex="-1">
<h1>Page title</h1>
<p>Main content starts here.</p>
</main>The skip link is the very first focusable element on the page so a Tab press from the address bar lands on it before any nav links. The href="#main" jumps focus and scroll to a target with id="main", which is the <main> landmark. Adding tabindex="-1" to <main> makes it programmatically focusable so screen readers actually move focus there (some browsers skip the focus jump otherwise). This combination is the W3C-recommended pattern for skip links.
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: hsl(220 90% 50%);
color: white;
padding: 0.5rem 1rem;
text-decoration: none;
border-radius: 0 0 0.25rem 0;
z-index: 100;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
outline: 3px solid white;
outline-offset: 2px;
}
</style>
<a class="skip-link" href="#main">Skip to main content</a>Using position: absolute; top: -40px; keeps the link off-screen during normal browsing while still leaving it in the accessibility tree (unlike display: none, which removes it entirely). On focus, the link slides into view at the top of the viewport so sighted keyboard users can confirm the action. The visible focus ring (outline) is non-negotiable: removing focus indication breaks WCAG 2.4.7. This pattern is recommended over the older clip and visibility: hidden approaches because it works consistently across screen readers.
<nav class="skip-links" aria-label="Skip links">
<a class="skip-link" href="#main">Skip to main content</a>
<a class="skip-link" href="#nav">Skip to navigation</a>
<a class="skip-link" href="#search">Skip to search</a>
</nav>
<header>
<nav id="nav" tabindex="-1">...nav...</nav>
<form role="search" id="search" tabindex="-1">...search...</form>
</header>
<main id="main" tabindex="-1">...content...</main>Pages with rich layouts (long sidebars, secondary nav, search) benefit from multiple skip targets. Wrapping them in a <nav aria-label="Skip links"> exposes them as a navigation landmark in the accessibility tree, so users can jump straight to the skip-link group. Each target gets tabindex="-1" so the skip actually moves focus. Only show the second and third links on focus too (same CSS as before) to avoid cluttering sighted views, while keyboard users tab through the whole group sequentially.