Landmark Roles
Semantic regions that identify the major sections of a web page, allowing screen reader users to quickly navigate to and between content areas.
In simple terms: Think of a website like a house. It has a front door (the header), a living room (the main content), a hallway (the navigation), and a back porch (the footer). Landmark roles are like signs on each room that tell a screen reader user which room they are in and let them jump straight to the room they want without walking through the whole house.
What Is Landmark Roles?
Landmark roles are semantic identifiers that define the major structural regions of a web page, such as the header, navigation, main content, sidebar, and footer. They provide a map of the page that screen reader users can use to quickly jump between sections, much as sighted users visually scan a page to locate the content area, the navigation, or the footer. In HTML, landmarks can be defined using native HTML5 sectioning elements (`<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`, `<form>`, `<section>`) or through explicit ARIA landmark roles (`role="banner"`, `role="navigation"`, `role="main"`, `role="complementary"`, `role="contentinfo"`, `role="search"`, `role="form"`, `role="region"`). Modern best practice is to use the HTML5 elements as the primary approach, since they implicitly carry landmark semantics in modern browsers and screen readers. The concept of landmarks addresses a fundamental challenge in web accessibility: page navigation. A sighted user lands on a page and immediately identifies the header at the top, the nav bar below it, the main content in the center, and the footer at the bottom. This takes a fraction of a second. A screen reader user, without landmarks, would need to listen through the page linearly to build the same mental model — a slow and frustrating process, especially on content-rich pages. With landmarks in place, screen reader users can pull up a list of all landmarks on the page and jump directly to any section. This transforms page navigation from a linear slog into an efficient, targeted experience.
Why It Matters
Landmarks are fundamental to efficient screen reader navigation. WebAIM's screen reader user surveys consistently show that navigating by landmarks and headings is one of the primary ways screen reader users find content on a page. Without landmarks, users fall back on less efficient strategies like tabbing through every link or listening to the entire page. WCAG Success Criterion 1.3.1 (Info and Relationships) requires that structural information conveyed through visual presentation be programmatically determinable. Landmarks fulfill this requirement by making the visual page structure available to assistive technology. WCAG 2.4.1 (Bypass Blocks) can also be partially satisfied through landmarks, as they allow users to skip past repetitive content to reach specific page regions. Landmarks also benefit accessibility testing and automated scanning tools. Analyzers can verify that a page has appropriate landmark structure — exactly one `<main>`, navigation regions with labels, complementary content properly identified — providing a quick indicator of structural accessibility. For developers, landmarks encourage good architectural thinking. Defining landmarks requires identifying the logical regions of a page, which leads to cleaner, more maintainable code. A page with well-defined landmarks is typically better organized than one without.
How It Works
Each landmark role serves a specific purpose and maps to a particular type of page region. ### banner The `banner` landmark (HTML: `<header>` when it is a direct child of `<body>`) identifies the site-wide header, typically containing the logo, site title, and primary navigation. There should be only one `banner` landmark per page. Note that `<header>` elements nested inside `<article>`, `<section>`, or other sectioning elements do not automatically become `banner` landmarks — only the top-level header does. ### navigation The `navigation` landmark (HTML: `<nav>`) identifies navigation regions. A page may have multiple navigation landmarks — primary navigation, footer navigation, breadcrumbs, in-page table of contents — and each should have a unique accessible name via `aria-label` or `aria-labelledby`. For example, `<nav aria-label="Primary">` and `<nav aria-label="Footer">` allow screen reader users to distinguish between them in a landmarks list. ### main The `main` landmark (HTML: `<main>`) identifies the primary content of the page. There must be exactly one `main` landmark per page. It represents the content that is unique to the page, excluding headers, footers, navigation, and sidebars that repeat across pages. The `main` landmark is also the target of "skip to main content" links. ### complementary The `complementary` landmark (HTML: `<aside>`) identifies content that supports the main content but is meaningful on its own, such as a sidebar with related articles, a glossary, or supplementary information. It should be labeled with `aria-label` when multiple complementary regions exist. ### contentinfo The `contentinfo` landmark (HTML: `<footer>` when it is a direct child of `<body>`) identifies the site-wide footer, typically containing copyright information, legal links, and contact information. Like `banner`, there should be only one `contentinfo` per page. ### search The `search` landmark identifies a search facility. In HTML, you can use `<search>` (a newer HTML element) or `<form role="search">`. If a page has multiple search landmarks (site search and a section-specific filter), each should have a unique `aria-label`. ### form The `form` landmark (HTML: `<form>` with an accessible name) identifies a form region. A `<form>` element only exposes as a landmark when it has an accessible name via `aria-label` or `aria-labelledby`. This is typically used for forms that serve a distinct purpose beyond search. ### region The `region` role (HTML: `<section>` with an accessible name) is a generic landmark for content that is important enough to be included in the landmarks list but does not fit other landmark categories. Like `form`, a `<section>` element only exposes as a landmark when it has an accessible name.
Examples
**Inaccessible page structure:** A page uses only `<div>` elements for layout. The header, navigation, content area, sidebar, and footer are all `<div>` elements with class names. A screen reader sees no landmarks and the user must navigate linearly. **Accessible page structure:** The same page uses `<header>`, `<nav aria-label="Primary">`, `<main>`, `<aside aria-label="Related articles">`, and `<footer>`. A screen reader user can jump directly to any section. **Inaccessible landmark usage:** A page has three `<nav>` elements with no labels. A screen reader user sees "navigation," "navigation," "navigation" in the landmarks list and cannot tell them apart. **Accessible landmark usage:** Each `<nav>` has a unique `aria-label`: "Primary navigation," "Breadcrumb," and "Footer navigation." The landmarks list shows distinct, descriptive names. **Inaccessible landmark usage:** A page has two `<main>` elements — one for a sidebar and one for the article content. This is invalid and confusing to assistive technology. **Accessible landmark usage:** The page has exactly one `<main>` containing the article content. The sidebar uses `<aside>` with an appropriate label.
Frequently Asked Questions
- What are the standard ARIA landmark roles?
- The eight ARIA landmark roles are: banner (site header), navigation (nav links), main (primary content), complementary (supporting content like sidebars), contentinfo (site footer), search (search functionality), form (form region when it has a specific purpose), and region (a generic landmark that must have an accessible name).
- Should I use HTML5 elements or ARIA roles for landmarks?
- Use HTML5 semantic elements (`<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`) as the primary approach, since they map to ARIA landmark roles automatically. Add explicit ARIA roles only when the HTML5 element is not available for your use case or when you need to support older assistive technology. Do not duplicate both on the same element in modern browsers.
- How do screen readers use landmarks?
- Screen reader users can list all landmarks on a page and jump directly to any one. In JAWS, pressing Insert+F3 opens a landmarks list. In NVDA, pressing D cycles through landmarks. In VoiceOver, using the rotor to select landmarks allows quick navigation. This makes landmarks essential for efficient page navigation.
Need help making your website ADA compliant?
Our team specializes in ADA-compliant web design and remediation. Get a free accessibility audit today.
Last updated: 2026-03-15