Skip Links and Landmark Regions: Structural Accessibility for Every Page

Imagine pressing Tab 47 times through a header, logo, search bar, and full navigation menu before reaching the article you came to read. This is reality for keyboard users on pages that lack skip links and proper landmark regions. These two mechanisms — one visible on focus, one structural — transform page navigation from an ordeal into something efficient.

What Are Skip Links?

A skip link is a hidden anchor link that becomes visible when focused, allowing keyboard users to bypass repetitive blocks of content and jump directly to the main content area. WCAG 2.2 Success Criterion 2.4.1 (Bypass Blocks) requires this mechanism at Level A — the most basic compliance tier.

Standard Implementation

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <header>
    <!-- Logo, navigation, search... -->
  </header>
  <main id="main-content" tabindex="-1">
    <!-- Page content -->
  </main>
</body>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  z-index: 1000;
  transition: top 0.2s;
}

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

The tabindex="-1" on the target element ensures that focus actually moves to it when the skip link is activated. Without it, some browsers scroll to the target but leave focus at the skip link, defeating the purpose.

Multiple Skip Links

Complex layouts may warrant multiple skip links:

Skip to main content — always first
Skip to search — for search-heavy applications
Skip to footer — when the footer contains important navigation or contact information

Group these in a skip link bar that appears on first Tab press. Keep the list short — three links maximum — to avoid creating another block to bypass.

ARIA Landmark Regions

Landmark regions define the structural areas of a page so assistive technologies can build a navigable outline. Screen reader users can jump between landmarks instantly — VoiceOver uses the rotor, NVDA uses the elements list, and JAWS uses the landmark quick key (R).

HTML5 Sectioning Elements as Landmarks

HTML5 introduced semantic elements that automatically map to ARIA landmark roles:

HTML Element	ARIA Role	Purpose
`<header>` (top-level)	`banner`	Site header with logo, search, nav
`<nav>`	`navigation`	Navigation links
`<main>`	`main`	Primary page content (only one per page)
`<aside>`	`complementary`	Supporting content, sidebars
`<footer>` (top-level)	`contentinfo`	Site footer with copyright, links
`<section>` (with label)	`region`	Generic labeled section
`<form>` (with label)	`form`	Form region

Using semantic HTML gives you landmarks for free. Adding explicit role attributes is only necessary for older browsers or when HTML elements don’t exist for the needed landmark (like role="search" prior to the HTML <search> element).

Labeling Landmarks

When a page has multiple instances of the same landmark type, each must have a unique accessible name:

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Footer navigation">...</nav>

<aside aria-label="Related articles">...</aside>
<aside aria-label="Advertisement">...</aside>

Without labels, a screen reader user hearing “navigation, navigation” has no way to distinguish which is which.

Landmark Strategy for Common Layouts

Blog or Article Page

banner (header)
  navigation "Main navigation"
main
  article
    region "Comments" (optional)
complementary "Related Posts"
contentinfo (footer)
  navigation "Footer navigation"

Dashboard Application

banner (header)
  navigation "Main navigation"
  search
main
  region "Dashboard Summary"
  region "Recent Activity"
  region "Analytics"
complementary "Quick Actions"
contentinfo (footer)

For dashboard patterns, see accessible dashboard design for detailed guidance on landmark structure in complex interfaces.

E-commerce Product Page

banner (header)
  navigation "Main navigation"
  navigation "Breadcrumb"
  search
main
  region "Product Details"
  region "Customer Reviews"
complementary "Related Products"
contentinfo (footer)

Common Implementation Mistakes

Missing <main> element: Every page should have exactly one <main> element. This is the most critical landmark — it tells screen reader users where the page’s unique content begins.

<header> and <footer> inside <main>: When nested inside <article>, <section>, or <main>, these elements lose their banner/contentinfo roles and become generic. Only top-level <header> maps to banner.

Over-landmarking: Not every <div> needs to become a region. Too many landmarks create noise. Stick to the major structural areas and only add role="region" with aria-label when users would benefit from direct navigation to that section.

Unlabeled duplicate landmarks: As noted above, multiple <nav> elements without distinct labels create confusion. Automated tools like axe flag this, but manual review catches subtleties.

Skip Links and Landmarks Working Together

Skip links and landmarks complement each other:

Skip links serve keyboard users who may or may not use screen readers — they provide a visible, actionable shortcut
Landmarks serve screen reader users specifically — they create a structural map of the page that enables non-linear navigation

A page should have both. Skip links satisfy WCAG 2.4.1, while landmarks address WCAG 1.3.1 (Info and Relationships) by conveying structure programmatically.

Testing

Keyboard test: Press Tab once on page load. The skip link should appear. Activating it should move focus to <main>.
Screen reader test: List all landmarks (VoiceOver rotor > Landmarks, NVDA Elements List > Landmarks). Verify each has a descriptive label and the page structure matches the visual layout.
Automated testing: axe DevTools and Lighthouse flag missing landmarks, duplicate unlabeled landmarks, and missing skip links. Use these as a first pass before manual testing methodology.

Key Takeaways

Skip links and landmark regions are low-effort, high-impact accessibility features. A properly implemented skip link takes fewer than 10 lines of HTML and CSS. Semantic HTML elements provide landmarks automatically. Together, they transform a linear, tedious page into a structured environment that every user can navigate efficiently. Add them to every page template in your design system, and they become a permanent part of your accessibility foundation.

Sources

W3C WAI: Page Structure — Landmarks — W3C tutorial on landmark regions and page structure.
WebAIM: Skip Navigation Links — Implementation guidance for skip links.
MDN Web Docs: ARIA Landmark Roles — Reference for all ARIA landmark roles.
The A11Y Project: Skip Links — Practical skip link implementation guide.