Last updated
Testing Checklist
- Press Tab on page load — the skip link should appear visually
- Press Enter to activate — focus should move to the main content area
- Continue pressing Tab — navigation should continue from the main content, not the header
- Test with screen reader (NVDA, JAWS, VoiceOver) — link should be announced as "Skip to main content"
- Verify the skip link is the first focusable element on the page
- Verify the skip link has sufficient color contrast when visible (4.5:1 minimum)
WCAG 2.1 Compliance
- Success Criterion 2.4.1 (Bypass Blocks) — Level A — required
- The skip link must be the first focusable element on the page
- It must be visible when focused (not permanently hidden)
- It must move focus to the target element when activated
Examples
Example 1: Basic Skip to Main Content
The minimum required skip link — place it as the very first element in the body:
<!-- HTML: first element inside <body> -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>...navigation...</header>
<main id="main-content" tabindex="-1">
<h1>Page Title</h1>
<p>Main content starts here...</p>
</main>
/* CSS: hidden by default, visible when focused */
.skip-link {
position: absolute;
top: -100%;
left: 0;
z-index: 9999;
padding: 12px 24px;
background: #000000;
color: #ffffff;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
border-radius: 0 0 4px 0;
transition: top 0.1s ease;
}
.skip-link:focus {
top: 0;
outline: 3px solid #ffdd00;
outline-offset: 2px;
}
Example 2: Multiple Skip Links
For complex pages with multiple distinct regions:
<!-- Multiple skip links for different page regions -->
<nav class="skip-links" aria-label="Skip navigation">
<a href="#main-content" class="skip-link">Skip to main content</a>
<a href="#main-nav" class="skip-link">Skip to navigation</a>
<a href="#search" class="skip-link">Skip to search</a>
<a href="#footer" class="skip-link">Skip to footer</a>
</nav>
<header>
<nav id="main-nav" tabindex="-1">...</nav>
<form id="search" tabindex="-1">...</form>
</header>
<main id="main-content" tabindex="-1">...</main>
<footer id="footer" tabindex="-1">...</footer>
Example 3: Focus Management with JavaScript
Ensure focus moves correctly when the skip link is activated:
// Smooth scroll + focus management
document.querySelectorAll('.skip-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').slice(1);
const target = document.getElementById(targetId);
if (target) {
// Move focus to the target element
target.focus();
// Scroll into view smoothly
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
Note: The tabindex="-1" on the target element is required so it can receive programmatic focus even though it's not normally focusable.