Keyboard users (and screen-reader users) tab through every nav link before reaching content. A skip-link as the first focusable element jumps straight to <main>. Required for WCAG 2.1 AA.
HTML
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<header>
<nav><!-- many links --></nav>
</header>
<main id="main" tabindex="-1">
<h1>Page heading</h1>
<!-- content -->
</main>
</body>
<style>
.skip-link {
position: absolute;
top: -40px; /* hidden off-screen by default */
left: 0;
padding: 8px 16px;
background: #1f2937;
color: white;
text-decoration: none;
border-radius: 0 0 4px 0;
z-index: 1000;
transition: top 0.15s;
}
.skip-link:focus {
top: 0; /* slides into view on Tab focus */
outline: 2px solid #fbbf24;
}
</style>Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.