Why It Matters
Users navigating with a keyboard or screen reader often have to tab through dozens of navigation links on every page before reaching the main content. A "Skip to Content" link provides a shortcut, significantly improving efficiency and reducing fatigue.
Implementation Pattern
The link should be the very first focusable element in the DOM. It can be visually hidden until focused, at which point it must become visible.
<!-- HTML Structure -->
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>...</nav>
<main id="main-content" tabindex="-1">
<!-- Main content starts here -->
</main>
</body>
/* CSS Styles */
.skip-link {
position: absolute;
top: -100px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
}
Key Considerations
- Target ID: Ensure the
hrefmatches theidof the<main>element. - Focus Management: Adding
tabindex="-1"to the target container ensures focus lands correctly in some browsers (like detailed in older bugs), though modern browsers handle fragment links well. - Visibility: The link must be visible when it receives focus. Do not use
display: noneorvisibility: hidden, as this removes it from the accessibility tree entirely.