ARIA Landmarks: Page Regions for Screen Readers
Also called: Landmark roles, Landmark regions, Page regions
Definition
ARIA landmarks are roles such as banner, navigation, main and contentinfo that identify the large regions of a page. Screen readers list them and let users jump directly to each region.
ARIA landmarks identify the main regions of a web page – header, navigation, main content, sidebar and footer – in a way that software can read. Sighted visitors see these areas at a glance; screen reader users get a list of landmark regions instead and can jump straight to "main" or "navigation" with a single key.
What it means
Landmarks belong to WCAG 1.3.1 Info and Relationships, a Level A criterion of WCAG 2.2: structure that is conveyed visually must be programmatically determinable. The W3C lists "Using ARIA landmarks to identify regions of a page" (ARIA11) and the matching HTML elements (H101) as sufficient techniques. Landmarks also help meet 2.4.1 Bypass Blocks, because they let users skip repeated content – a job they share with the skip link.
Most landmarks come for free with semantic HTML. You only need role attributes when you cannot use the native element.
| Landmark role | HTML element | Note |
|---|---|---|
| banner | <header> |
Only when not inside article, aside, main, nav or section |
| navigation | <nav> |
Label it if there is more than one |
| main | <main> |
One per page |
| complementary | <aside> |
Related content, e.g. a sidebar |
| contentinfo | <footer> |
Same condition as header |
| search | <search> |
For the site search |
| form | <form> |
Only with an accessible name |
| region | <section> |
Only with an accessible name |
The W3C ARIA Authoring Practices recommend that all visible content sits inside a landmark, so nothing is missed when users move from region to region.
Examples
<!-- Without landmarks: only anonymous divs -->
<div class="header">…</div>
<div class="menu">…</div>
<div class="content">…</div>
<!-- With landmarks: semantic HTML, no extra ARIA needed -->
<header>
<a href="/">Logo</a>
<nav aria-label="Main">…</nav>
</header>
<main>
<h1>Running shoes</h1>
…
</main>
<aside aria-labelledby="tips">
<h2 id="tips">Size tips</h2>…
</aside>
<footer>
<nav aria-label="Footer">…</nav>
</footer>When aria-labelledby points to an id, that id must be unique – a duplicate ID can give the landmark the wrong name.
Build the page frame from <header>, <nav>, <main>, <aside> and <footer>, use exactly one <main>, and label landmarks that appear more than once.
Add role="main" on top of <main>, wrap every small box in a <section aria-label>, or leave cookie banners and promo bars outside all landmarks.
Landmarks and headings work together: landmarks give the rough map, headings the details inside each region. A skipped heading level inside main still confuses the outline.
How to check ARIA landmarks
Questions
What are ARIA landmarks?
Roles that mark the large regions of a page: banner, navigation, main, complementary, contentinfo, search, form and region. Screen readers list them so users can jump straight to a region.
Do I need role attributes if I use HTML5 elements?
No. <header>, <nav>, <main>, <aside> and <footer> already map to landmark roles. Adding the same role again is redundant. Use role only where you cannot change the element.
Are ARIA landmarks required by WCAG?
WCAG does not require landmarks by name. They are one sufficient technique for 1.3.1 Info and Relationships and for 2.4.1 Bypass Blocks. In practice they are the most common and reliable way to expose page regions.
How many main landmarks can a page have?
One. The W3C recommends exactly one main landmark per page, and at most one banner and one contentinfo at the top level.
How do I find missing landmarks on my site?
Check one page per template in DevTools. For a fast overview of structural issues on your homepage, run the free WCAG scanner.
Related terms
Skip Link: Jump Straight to the Main Content
A skip link is a link at the very top of a page that jumps to the main content, so keyboard and screen reader users do not have to pass the whole menu on every page. It is a sufficient technique for WCAG 2.4.1.
Read definition: Skip Link: Jump Straight to the Main ContentSkipped Heading Level: Warning Explained and Fixed
A skipped heading level is a jump of more than one rank down the heading hierarchy, for example from h2 straight to h4. Screen reader users who navigate by headings may think a section is missing.
Read definition: Skipped Heading Level: Warning Explained and FixedKeyboard Navigation: WCAG 2.1.1 Explained
Keyboard navigation means that every function of a website can be reached and operated with a keyboard alone – usually with Tab, Shift+Tab, Enter, Space and the arrow keys. WCAG 2.1.1 requires it at Level A.
Read definition: Keyboard Navigation: WCAG 2.1.1 ExplainedDuplicate ID: Why It Still Breaks Accessibility
A duplicate ID is an id value used on more than one element of the same page. Labels, ARIA attributes and anchor links that point to that id then reach only the first element, so other fields and controls lose their name or description.
Read definition: Duplicate ID: Why It Still Breaks Accessibility