ARIA landmark roles and structure

Landmark roles let assistive-technology users navigate a page by region: banner, main, navigation, complementary, contentinfo, search, form, region. Most have native HTML equivalents.

Normative spec: https://www.w3.org/TR/wai-aria-1.2/#landmark_roles
Last verified: 2026-04-27
Byline: Editorial team

Why landmarks exist

Sighted users skim a page using visual cues — colour, weight, position, whitespace. Assistive-technology users skim with the landmark menu: in most screen readers, a single key (d in NVDA, vo + u then “Landmarks” in VoiceOver) opens a list of every region on the page. Without landmarks, the user must read linearly from the top.

The landmark roles let authors declare these regions explicitly. They are part of the document structure layer of ARIA, not the widget layer.

The seven landmark roles

ARIA role	Native HTML	Purpose
`banner`	`<header>` (top-level only)	Site-wide branding and primary nav.
`navigation`	`<nav>`	Major in-page or in-site navigation.
`main`	`<main>`	The unique main content of the page.
`complementary`	`<aside>` (top-level)	Tangential content.
`contentinfo`	`<footer>` (top-level only)	Legal, copyright, site map.
`search`	`<search>` (HTML 2023)	A search interface.
`form`	`<form aria-label="...">`	A form region requiring a label.
`region`	`<section aria-labelledby="...">`	An author-named region.

A landmark must have an accessible name to be useful when there are multiple of the same role. Multiple nav elements should each have aria-label or aria-labelledby: “Primary”, “Footer”, “Breadcrumb”.

Native equivalents are preferred

Per the First Rule of ARIA, prefer native HTML. <header>, <nav>, <main>, <aside>, <footer>, and <search> map to their ARIA equivalents automatically across Chromium (Blink), WebKit, and Gecko. The native elements also gain default user-agent styles (margins, baseline) that ARIA roles do not.

There are two contexts where the native and ARIA mappings diverge:

Top-level vs nested. A <header> inside an <article> does not expose banner; only the page-level <header> does. Same for <footer> and contentinfo.
<section> is not a region by default. <section> only exposes the region landmark when it has an accessible name (aria-label or aria-labelledby). Without a name, AT treats it as generic.

Layout pattern

A typical page skeleton:

<header>...</header>            <!-- banner -->
<nav aria-label="Primary">...</nav>
<main>...</main>
<aside aria-label="Related links">...</aside>  <!-- complementary -->
<footer>...</footer>            <!-- contentinfo -->

Use exactly one <main> and one top-level <header>/<footer>. Multiple of the rest are fine if each is named.

Common pitfalls

Wrapping the entire page in a <main> plus <div> shell — main may then announce twice.
Search role without <form>. The search role is for the region; the actual control still needs a form-style role and an accessible name.
role="region" on every <section>. As above, the native element only acts as a landmark if it has a name. Wrapping unrelated content in region clutters the landmark menu.
Skip link points to a non-<main> div. Make sure the skip target is the actual main landmark so focus and announcement align.

Browser engine support

Landmark mapping is consistent across Chromium (Blink), WebKit, and Gecko. The HTML 2023 <search> element reached interop in 2024; authors targeting older versions of macOS-only WebKit may want a parallel <form role="search"> for safety.