Landmarks and Screen-Reader Navigation
Give assistive-tech users a table of contents they can jump around.
Sighted users skim a page in seconds. Screen-reader users navigate by landmarks — and they get those landmarks for free when you use semantic elements. This is the biggest accessibility payoff for the least effort.
The landmark elements
<header>→ banner landmark.<nav>→ navigation landmark.<main>→ main landmark (exactly one per page).<aside>→ complementary landmark.<footer>→ contentinfo landmark.
A screen-reader user can pull up a list of these and jump straight to, say, the main content — skipping the nav entirely.
Name your repeats
If a page has two <nav> elements, label them so they're distinguishable:
<nav aria-label="Primary">...</nav>
<nav aria-label="Footer">...</nav>The skip link
Add a link at the very top that jumps to #main-content. Keyboard users hitting Tab first thing can bypass your whole menu — a small courtesy that makes a huge difference.
Example
When to use it
- A developer adds role="search" to a search form so screen reader users can jump to it via landmark navigation.
- A single-page app uses aria-label attributes on multiple <nav> elements to distinguish primary, footer, and breadcrumb navs.
- An accessibility audit requires every page to have exactly one <main> landmark so users can skip to the main content.
More examples
All standard ARIA landmark roles
Explicit role attributes reinforce landmark semantics for older assistive technologies that miss implicit roles.
<header role="banner">
<nav role="navigation" aria-label="Primary">
<a href="/">Home</a>
</nav>
</header>
<main role="main">
<h1>Content</h1>
</main>
<aside role="complementary" aria-label="Sidebar">
<p>Related links</p>
</aside>
<footer role="contentinfo">
<p>Copyright 2025</p>
</footer>Named navigation landmarks
Unique aria-label values differentiate multiple <nav> landmarks so screen reader users can choose the right one.
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/courses">Courses</a>
</nav>
<!-- ... page content ... -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/html">HTML</a></li>
<li aria-current="page">Landmarks</li>
</ol>
</nav>Search landmark for the search form
The HTML <search> element (or role="search") marks the search form as a navigable landmark region.
<search>
<form action="/search" method="get">
<label for="q">Search courses</label>
<input type="search" id="q" name="q">
<button type="submit">Search</button>
</form>
</search>
Discussion