Skip Links
A "Skip to main content" link lets keyboard users bypass repetitive navigation. It should be the first focusable element on the page and can be visually hidden until focused.
HTML
Intermediate
3 min read
Skip Navigation Links
Example
<style>
.skip-link {
position: absolute;
top: -100%;
left: 0;
padding: 8px 16px;
background: #0d6efd;
color: white;
font-weight: bold;
z-index: 9999;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
}
</style>
<a href="#main" class="skip-link">Skip to main content</a>
<nav>... lengthy navigation ...</nav>
<main id="main" tabindex="-1">Main content here</main> Pro Tip
Add tabindex="-1" to the main element so it can receive focus when the skip link is activated.