Skip to Main Content Link

Accessible skip link that allows keyboard users to bypass repetitive navigation and jump directly to the main content. This is a WCAG 2.2 Level A requirement.

Press Tab to see the skip link appear:

Main content area

<a href="#main-content" class="ads-skip-link">Skip to main content</a>

<!-- Place this as the first focusable element in your body -->
<!-- Then add id="main-content" to your main content area -->

.ads-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ads-primary-color);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
}

.ads-skip-link:focus {
    top: 0;
}

Skip to Main Content Link

HTML

CSS