Concepts

Landmark

Also: ARIA landmark, landmark region

A region of a page identified by HTML5 element or ARIA role that screen-reader users can navigate to directly. Landmarks (banner, navigation, main, complementary, contentinfo) form the page's structural skeleton.

Landmarks are page-level regions that screen-reader users can jump between directly, via dedicated keyboard shortcuts. They’re the page equivalent of chapter divisions in a book: a sighted user gets the structure from layout cues (the visible header at the top, the sidebar on the right, the footer at the bottom); a screen-reader user gets the structure from landmarks.

The standard landmarks

Each of these is both an HTML5 element and an ARIA role. Use the HTML5 element where possible; the ARIA role exists for cases where you can’t use the native element.

RegionHTML5 elementARIA role
Page banner (logo, primary nav)<header> (top of page)role="banner"
Main navigation<nav>role="navigation"
Primary content<main>role="main"
Complementary content (sidebar)<aside>role="complementary"
Page footer (copyright, secondary links)<footer> (bottom of page)role="contentinfo"
Search<search> (HTML5) or <form role="search">role="search"
Generic region needing identification—role="region" (with label)
Form (if not search)<form>role="form"

Note that <header> and <footer> map to banner and contentinfo only when they’re direct children of <body>. A <header> inside an <article> is just an article-header — it doesn’t become a banner landmark.

How screen-reader users use them

Each major screen reader has a landmarks-only navigation mode:

  • JAWS: R cycles through landmarks; Shift+R cycles backward; Insert+F7 opens a list of all landmarks.
  • NVDA: D cycles through landmarks; Shift+D backward; Insert+F7 opens the elements list.
  • VoiceOver (macOS): VO+U opens the rotor; rotate to “Landmarks”; arrow-key through.
  • VoiceOver (iOS): two-finger rotate to “Landmarks” on the rotor; swipe up/down through them.
  • TalkBack (Android): swipe up then right to open reading-controls menu; select “Landmarks” mode; swipe right through them.

A page with good landmarks gives the screen-reader user a one-keystroke table of contents.

Common landmark mistakes

  • No <main>. Without a main landmark, screen-reader users have to tab past the header on every page load. Every page should have exactly one <main>.
  • Multiple unlabelled <nav>s. A page with both a top nav and a sidebar nav, each as <nav>, makes the screen-reader user pick between two indistinguishable “navigation” entries. Label each with aria-label: <nav aria-label="Primary">, <nav aria-label="Page contents">.
  • role="banner" on inner element. A <header> inside <main> or <article> is not a banner; it’s an article header. Don’t add role="banner" to it.
  • Duplicate landmarks. Two <main>s on one page break the “landmark-no-duplicate-main” rule. axe and Lighthouse both catch this.
  • Region without a label. role="region" requires aria-label or aria-labelledby. Otherwise screen readers ignore it.

How to audit landmarks

Open the page in any modern screen reader, press the landmark list shortcut, and verify:

  1. There’s exactly one banner, one main, one contentinfo.
  2. Each <nav> has a distinct accessible name.
  3. The landmark structure matches the visible page structure.

A landmark list that reads “banner, navigation, navigation, main, complementary, contentinfo” with no further labels means the user can’t tell the two navigations apart. Fix it.