Last updated
ARIA Landmark Roles Quick Reference
- banner — page header (one per page, use <header>)
- navigation — nav menus (use <nav>, label each one)
- main — primary content (one per page, use <main>)
- complementary — sidebar content (use <aside>)
- contentinfo — page footer (one per page, use <footer>)
- search — search form (use role="search")
- form — significant forms (use <form> with aria-label)
- region — named sections (use <section> with aria-label)
Use the ARIA Landmark Checker at TechConverter.me to audit your pages for landmark issues and ensure screen reader users can navigate your content efficiently.
Examples
Example 1: Missing Main Landmark
Problem — no main landmark:
<body>
<div id="header">...</div>
<div id="content">...</div> ← no landmark role
<div id="footer">...</div>
</body>
Issue: Screen reader users cannot skip to main content.
Fixed:
<body>
<header>...</header>
<main>...</main> ← creates main landmark
<footer>...</footer>
</body>Example 2: Multiple Navigation Landmarks Without Labels
Problem — unlabeled nav elements:
<nav>...primary menu...</nav>
<nav>...breadcrumbs...</nav>
<nav>...footer links...</nav>
Issue: Screen reader announces "navigation" three times
with no way to distinguish between them.
Fixed:
<nav aria-label="Primary navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>Example 3: Complete Landmark Structure
Correct page structure with all landmarks:
<body>
<header> <!-- banner landmark -->
<nav aria-label="Primary">...</nav> <!-- navigation -->
</header>
<nav aria-label="Breadcrumb">...</nav>
<main> <!-- main landmark -->
<h1>Page Title</h1>
<article>...</article>
</main>
<aside aria-label="Related articles"> <!-- complementary -->
...
</aside>
<footer> <!-- contentinfo landmark -->
<nav aria-label="Footer">...</nav>
</footer>
</body>