Landmark Regions

Landmark regions identify distinct areas of a page, enabling screen reader users to navigate directly to specific sections. Proper landmark implementation creates a structural map that makes pages significantly easier to understand and navigate.

What Are Landmark Regions

Landmark regions are semantic page divisions that assistive technologies recognize and expose to users. Screen readers provide commands to list all landmarks on a page and jump directly to any landmark, bypassing intervening content.

HTML5 introduced semantic elements that serve as implicit landmarks: header, nav, main, aside, footer, and section. ARIA landmark roles provide equivalent functionality: banner, navigation, main, complementary, contentinfo, and region. Either approach creates navigable page structure.

WCAG Success Criterion 1.3.1 (Info and Relationships) requires that structural information conveyed visually is also available programmatically. Landmark regions help satisfy this requirement by making page organization accessible to assistive technology users.

How Landmark Regions Work

Screen readers interpret landmark elements and present them to users through landmark navigation features. A user might press a key to hear a list of all landmarks on the page, then select one to jump directly to that section.

Each landmark type conveys specific meaning. The main landmark indicates primary page content. Navigation landmarks identify navigation blocks. Banner landmarks mark the page header. These semantic distinctions help users understand page organization without visual inspection.

HTML5 elements create implicit landmarks:

• header (in body context) creates banner landmark
• nav creates navigation landmark
• main creates main landmark
• aside creates complementary landmark
• footer (in body context) creates contentinfo landmark
• section with accessible name creates region landmark

ARIA roles can explicitly declare landmarks on any element. This proves useful for legacy markup or when HTML5 elements cannot be used. The role attribute overrides implicit semantics: role=“navigation” creates a navigation landmark regardless of the element type.

Multiple landmarks of the same type require accessible names to distinguish them. Two navigation regions might be labeled “Primary navigation” and “Footer navigation” using aria-label or aria-labelledby.

Key Considerations

• Use HTML5 semantic elements as the primary landmark implementation
• Ensure exactly one main landmark exists per page
• Label multiple landmarks of the same type with descriptive names
• Avoid excessive landmarks that create navigation noise
• Nest landmarks appropriately (navigation within header, for example)
• Do not use landmark roles on generic containers without purpose
• Test landmark structure with screen reader landmark navigation

Common Questions

How many landmarks should a page have?

A typical page includes banner, main, and contentinfo landmarks at minimum, with navigation landmarks for each distinct navigation block. Additional landmarks like complementary (for sidebars) appear as needed based on page structure.

Too many landmarks dilute their usefulness. If users must wade through a long landmark list, the navigation benefit decreases. Each landmark should represent a meaningful page division, not simply every section of content.

Should sections always be landmarks?

The section element only creates a landmark when it has an accessible name via aria-label or aria-labelledby. Unnamed sections do not appear in landmark navigation. This behavior is intentional: not every content section needs landmark status.

Use named section landmarks for major page divisions that users might want to navigate to directly. Generic content sections within the main area typically do not need landmark status unless they serve as meaningful navigation targets.

How do landmarks relate to skip links?

Landmarks and skip links provide complementary navigation mechanisms. Skip links offer a single bypass option visible at the start of navigation. Landmarks provide multiple navigation targets accessible through screen reader commands.

Pages should implement both mechanisms. Skip links help users who navigate sequentially. Landmarks help screen reader users who can access landmark navigation features. The combination provides robust bypass mechanisms for various assistive technology users.

Summary

Landmark regions define navigable page structure through HTML5 semantic elements or ARIA roles. Screen reader users can list and jump between landmarks, making page navigation significantly more efficient. Design systems should establish landmark patterns that create clear, consistent page structure.