Introduction
Web accessibility isn't just about alternative text and keyboard navigation--it's about creating a semantic structure that screen reader users can navigate efficiently. Landmark roles provide the architectural framework that transforms visually apparent page layouts into meaningful, navigable regions for assistive technology users.
The landmark role serves as an abstract superclass for eight concrete ARIA roles, each designed to identify specific types of content regions. Rather than using role="landmark" directly, developers should leverage semantic HTML elements--which automatically convey appropriate landmark information--or explicitly apply the specific landmark roles that match their content's purpose.
Understanding landmark roles is essential for achieving WCAG compliance, particularly Success Criterion 1.3.1 (Info and Relationships). Beyond compliance, well-implemented landmarks significantly improve the user experience for the millions of people who rely on screen readers. Pair landmark navigation with ARIA keyboard shortcuts to create truly navigable interfaces for assistive technology users.
Key concepts for implementing accessible landmark regions
What Makes Content Landmark-Worthy
Landmarks identify regions users need to access repeatedly: main content, navigation, search, and supplementary sections.
The Abstract Landmark Role
Landmark is an abstract superclass--use concrete subclass roles like banner, navigation, or region instead.
Efficient Navigation
Screen readers use landmarks to provide keyboard shortcuts, allowing users to jump directly to desired content regions.
| HTML Element | Implied Landmark Role | Requirements |
|---|---|---|
| <header> | banner | Direct child of <body> only |
| <nav> | navigation | Multiple allowed with unique labels |
| <main> | main | One per page recommended |
| <aside> | complementary | Related to main content |
| <footer> | contentinfo | Direct child of <body> only |
| <form> | form | Requires aria-label or aria-labelledby |
| <section> | region | Requires accessible name |
| <search> | search | No label required |
The 8 Concrete Landmark Roles
Banner
The <header> element creates a banner landmark when direct child of <body>, representing site-oriented content like logos and site search tools. Only one banner per page.
Main
The <main> element represents the primary content of the page. Each page should have one main landmark as a top-level landmark not nested within other landmarks.
Navigation
The <nav> element creates a navigation landmark for sections containing navigational links. Multiple nav elements are allowed when each has a unique label.
Complementary
The <aside> element creates a complementary landmark for content related to but separable from main content. Should be a top-level landmark.
Contentinfo
The <footer> element creates a contentinfo landmark when direct child of <body>, containing footer information like copyright and privacy links.
Form
The <form> element creates a form landmark only when it has an accessible name via aria-label, aria-labelledby, or title.
Search
The <search> element creates a search landmark without requiring a label. Use for search functionality across your site.
Region
The <section> element creates a region landmark only when labeled with aria-label or aria-labelledby. Use as a catch-all for important content.
Common Implementation Patterns
Implementing landmarks correctly is a fundamental part of web development best practices for accessible websites. Proper landmark structure ensures assistive technology users can navigate efficiently.
Basic Page Structure
<body>
<header>
<nav aria-label="Primary">...</nav>
</header>
<main>
<!-- page content -->
</main>
<aside aria-label="Related">...</aside>
<footer>
<nav aria-label="Footer">...</nav>
</footer>
</body>
Multiple Navigation Elements
<nav aria-label="Primary Navigation">
<!-- main menu links -->
</nav>
<nav aria-label="Secondary Navigation">
<!-- utility links -->
</nav>
<nav aria-label="Footer Links">
<!-- footer navigation -->
</nav>
Labeled Regions
<section aria-label="Featured Products">
<!-- product carousel -->
</section>
<section aria-labelledby="news-heading">
<h2 id="news-heading">Latest News</h2>
<!-- news articles -->
</section>
Search Landmark
<search aria-label="Site Search">
<form role="search">
<input type="search" aria-label="Search query">
<button type="submit">Search</button>
</form>
</search>
**NVDA**: Press D to jump to next landmark, Shift+D for previous\n\n**JAWS**: Press R to jump to next landmark, Shift+R for previous\n\n**VoiceOver**: Use rotor to navigate landmarks (Control+Option+U)
Building Accessible Page Layouts
Landmarks work alongside container scroll state queries and other accessibility features to create fully navigable interfaces. Understanding how landmarks interact with scroll behavior and dynamic content updates ensures comprehensive accessibility coverage.
Minimal Landmark Structure
The essential accessible page structure includes banner, navigation, main, complementary, and contentinfo landmarks. This provides comprehensive navigation coverage for assistive technology users.
E-Commerce Product Page
Product pages typically include: page header with search, breadcrumb navigation, product details in main, related products in aside, and customer service links in footer. Each section gets an appropriate landmark.
Dashboard Applications
Complex applications use region landmarks for major functional areas, with labeled sections within each region. The key is balancing landmark coverage without overwhelming users with too many options.
Frequently Asked Questions
What is the difference between landmark roles and ARIA roles?
Landmark roles are a subset of ARIA roles specifically designed to identify page regions. The landmark role itself is abstract and shouldn't be used directly--instead, use concrete roles like banner, navigation, main, or region.
Do I need to add role="banner" to my header element?
No. Modern browsers automatically map the `<header>` element to the banner landmark when it's a direct child of `<body>`. Only use explicit roles if supporting older browsers that don't recognize the semantic mapping.
How many landmarks should a page have?
There's no strict maximum, but too many landmarks reduce their utility. Aim for 5-8 meaningful landmarks: banner, main, 1-3 navigation sections, complementary (optional), contentinfo, and search.
What makes a good landmark label?
Labels should be concise but descriptive, typically identifying either the navigation's location ('Primary', 'Footer') or its purpose ('Main Menu', 'Customer Service'). Avoid redundant phrases like 'Navigation' in labels.
Can I use landmarks on single-page applications?
Yes, but SPA landmarks need careful management. Update landmarks when views change, or use region landmarks for dynamic content areas that update without full page reloads.