# ARIA Landmarks: Page Regions for Screen Readers

Source: https://allyway.ai/glossary/aria-landmarks

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](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html), a Level A criterion of [WCAG 2.2](https://allyway.ai/regulations/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](https://allyway.ai/glossary/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 |

> **Tip:** > **Name duplicate landmarks – without repeating the role**
> With two `<nav>` elements, give each a unique label, e.g. `aria-label="Main"` and `aria-label="Footer"`. Screen readers already say "navigation", so "Main navigation" would be heard twice.

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

```html title="Example"
<!-- 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](https://allyway.ai/glossary/duplicate-id) can give the landmark the wrong name.

**Do:** Do

Build the page frame from `<header>`, `<nav>`, `<main>`, `<aside>` and `<footer>`, use exactly one `<main>`, and label landmarks that appear more than once.

**Don't:** Don't

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](https://allyway.ai/glossary/skipped-heading-level) inside `main` still confuses the outline.

## How to check ARIA landmarks



## Questions

Q: What are ARIA landmarks?
A: 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.

Q: Do I need role attributes if I use HTML5 elements?
A: 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.

Q: Are ARIA landmarks required by WCAG?
A: 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.

Q: How many main landmarks can a page have?
A: One. The W3C recommends exactly one `main` landmark per page, and at most one banner and one contentinfo at the top level.

Q: How do I find missing landmarks on my site?
A: Check one page per template in DevTools. For a fast overview of structural issues on your homepage, run the [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites).