Skip Links and Landmarks: Accessible Page Navigation

A page with dozens of header links can force keyboard users through the same sequence on every visit. A skip link provides a direct route past that repeated content. Landmarks provide a complementary map for people using assistive technology to navigate by page regions.

Design two complementary navigation routes

A skip link is an ordinary link to an important destination, usually the main content. It should appear near the start of the focus order and become visible when focused. A landmark is a semantic region, such as navigation or main, that assistive technology can expose in a region list.

Use the contrast checker to check the skip link's text against its own background and the focus indicator against nearby surfaces. A hidden-until-focused link must become genuinely readable when it appears, not merely exist as a technically focusable element outside the viewport.

These mechanisms serve overlapping but different audiences. Sighted keyboard users need the visible shortcut; screen reader users may use either it or landmark commands. Neither mechanism justifies removing the other. The WCAG interface guide provides a broader checklist for reviewing the surrounding page experience.

Build a skip link with a stable target

Place the link before the repeated header controls in source order. Give the destination a unique ID that remains stable across layout variations. A main element is a natural target because it marks where the page-specific content begins, rather than a sidebar or another navigation list.

<a class="skip-link" href="#main-content">Skip to main content</a>
<header>
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/products">Products</a>
</nav>
</header>
<main id="main-content" tabindex="-1">
<h1>Product comparison</h1>
<p>Choose the features that matter to your team.</p>
</main>

The negative tabindex lets the destination receive focus without adding it to the ordinary Tab sequence. Fragment navigation and focus handling have varied across browsers, so test the next Tab press after activation. It should proceed into the main content, not return to the first header item.

Start with native fragment behavior rather than preventing the default action. If your tested browser matrix requires a focus enhancement, make it narrow: resolve the exact target, focus it, and preserve the fragment destination. Do not attach a global handler that hijacks every same-page link or invents unexpected scrolling behavior.

The W3C bypass blocks guidance explains the underlying requirement. A skip link is a widely useful technique, not a claim that every page must implement an identical visual pattern or the same number of shortcuts.

Make the focused shortcut impossible to miss

Hide the unfocused link without using display none, visibility hidden, or the hidden attribute. Those methods remove it from ordinary keyboard access. A translated position can work when the focused rule reliably brings the link back and no parent clips the result.

.skip-link {
position: fixed;
inset-block-start: 0.75rem;
inset-inline-start: 0.75rem;
transform: translateY(-200%);
z-index: 10000;
padding: 0.75rem 1rem;
color: #fff;
background: #10243a;
}
.skip-link:focus {
transform: none;
outline: 3px solid #ffcf33;
outline-offset: 3px;
}
#main-content {
scroll-margin-block-start: 6rem;
}

The large stacking value is illustrative, not universal. Place the link in your actual overlay system and confirm it is not trapped below a sticky banner. Visible on focus means users can read the label, identify the focus state, and activate the link without guessing where it appeared.

Scroll margin can help avoid a fixed header covering the destination, but a hardcoded value may become wrong when navigation wraps at zoom. Test narrow viewports, translated labels, and browser zoom. Avoid removing the target's outline globally; users still need a clear sense of where activation moved them.

Use landmarks to describe real page regions

Use a top-level header, named navigation, main, and top-level footer where those structures fit. Their implicit semantics depend on context: a header inside an article does not represent the whole page's banner. Prefer native elements instead of duplicating their implicit roles on generic containers.

Keep one primary main region in the active page view. If an application preserves inactive routes in the DOM, ensure hidden views do not leave confusing exposed main landmarks. A page with several competing “main” destinations makes the region list less useful even when each container has a technically valid role.

When there are multiple navigation landmarks, give them distinct, concise names such as Primary, Account, and Footer. Do not label all of them “Navigation,” since the role already communicates that information. If two regions contain the same set of links, matching labels can communicate that equivalence.

The WAI landmark examples demonstrate useful structures. Resist landmark overload: turning every card into a named region produces a long list with little navigational value. Headings remain essential for understanding the organization within each region.

Test complete routes, not isolated markup

Start at the browser's address bar, enter the page, and press Tab. Confirm that the first relevant control is the skip link, its label is visible, and activation reaches the intended content. Then continue tabbing and reverse direction with Shift+Tab to verify a coherent sequence.

Repeat with a screen reader. Inspect the landmark list and navigate through regions in order. Confirm that labels distinguish repeated navigation areas and that headings explain content inside them. MDN's main element reference clarifies the semantic purpose of the main region and its relationship to document structure.

For client-side routing, test direct loads and internal transitions separately. The destination ID must exist in the newly rendered page, and application-level focus management must not immediately override the user's skip action. Update the document title and route focus strategy independently rather than forcing all navigation through the skip link.

Document repeatable checks in your development process: header expanded, header collapsed, cookie notice visible, zoom increased, and route changed. Automated tests can verify the link and target exist, but only interaction testing reveals obscured destinations, broken focus progression, and shortcuts that vanish behind overlays.

Key takeaways

• Provide a visible-on-focus shortcut before repeated header controls.
• Use a stable main-content target and verify subsequent keyboard movement.
• Give multiple navigation landmarks meaningful, distinct names.
• Check sticky headers, zoom, overlays, and client-side route transitions.
• Combine skip links, landmarks, and headings instead of treating them as substitutes.