Navigation

Landmarks

Available

Divides the page into regions using header, nav, main, footer, etc., enabling quick navigation for assistive technologies.

What Are Landmarks?

Landmarks are HTML elements like <header>, <nav>,<main>, <footer>, and <aside> thatdivide a page into meaningful regions. They communicate "this is the header," "this is the main content," and "this is the footer" not just visually but programmatically.

A layout that is obvious at a glance becomes nothing but a "flat blob of text" to assistive technologies when built with <div> elements alone. Landmarks provide the map that assistive technologies need.

Why Does Accessibility Matter?

Screen reader users can use the landmark list (rotor) tojump directly to regions such as "main" or "navigation." When a page is nothing but <div> elements, this navigation method is entirely unavailable.
Keyboard users benefit from a skip link("Skip to main content") at the top of the page, letting them bypass header links without Tab-bing through every one.
When <h1> and other headings are present,heading navigation lets users quickly grasp the page structure.

Live Demo (Recommended Implementation)

Below is a blueprint of a page structured with landmarks. Each block represents the corresponding HTML element (and its implicit role). The actual semantics come from the HTML shown in the "Recommended Pattern" section.

Page Blueprint Using Landmarks

Skip to main content (skip link)

<header>banner (site-wide header)Logo + <nav aria-label="Global">

<main>main (primary content; one per page)<h1> goes here too, just one

<aside>complementary (supplementary)

Key points: main and h1 appear only once per page. When there are multiple navs, distinguish them with aria-label. Supplementary content goes in aside. Screen readers use these region boundaries to navigate quickly.

Tip

Screen readers have a way to open a "landmark list" (in VoiceOver, the rotor via VO+U). It shows banner / navigation / main / complementary / contentinfo, and selecting one jumps directly to that region. This is the value you cannot get with <div>.

Keyboard Interaction

Key	Action	Priority
`Tab (at the top of the page)`	A skip link appears first and pressing Enter jumps to the main content	Recommended
`SR landmark navigation`	Jump by landmark region (banner / nav / main / ...) (assistive technology operation)	Required
`SR heading navigation`	Navigate through h1-h6 headings to understand page structure (assistive technology operation)	Required

Note

You do not need to implement any special keyboard handling on landmarks themselves.Simply using the correct elements is enough for assistive technology navigation to work automatically. The only thing you need to provide yourself is the skip link (a link at the top + <main id="main">).

Required WAI-ARIA Roles

Target	Attribute / Role	Meaning
<header> (top-level)	`banner`	Site-wide header area. One per page.
<nav>	`navigation`	If there are multiple navs, differentiate them with aria-label / aria-labelledby.
<main>	`main`	Main content. Only one per page. Also only one <h1>.
<aside>	`complementary`	Supplementary content (related info, ads, etc.).
<footer> (top-level)	`contentinfo`	Copyright and site owner information. One per page.

Recommended Pattern (Good)

Good / Recommended

Just use the right native elements. <main> and <h1> appear once, multiple <nav> elements are distinguished by labels. Add a skip link at the top.

Markup:

<body>
  <!-- Page top: lets keyboard users jump straight to content -->
  <a class="skip-link" href="#main">Skip to main content</a>

  <header>            <!-- role="banner" -->
    <a href="/">Site Name</a>
    <nav aria-label="Global">  <!-- Multiple navs need labels to distinguish them -->
      <ul>
        <li><a href="/products">Products</a></li>
        <li><a href="/about">About Us</a></li>
      </ul>
    </nav>
  </header>

  <main id="main">    <!-- role="main". Only one per page -->
    <h1>Running Shoes</h1>  <!-- Only one h1 per page -->
    <p>Main content...</p>

    <aside aria-label="Related Products">  <!-- role="complementary" -->
      <h2>Recommendations</h2>
    </aside>
  </main>

  <footer>            <!-- role="contentinfo" -->
    <p>&copy; 2026 Site Name</p>
  </footer>
</body>

Note

The skip link is typically hidden by default and revealed on Tab focus(shown via :focus). Even if you hide it visually, always make sure it appears on screen when focused.

Anti-pattern (Bad)

Below is the same visual layout built entirely with <div> elements. Mouse users won't notice the difference, but assistive technologies receive no region or heading information at all.

Page Structure Built Entirely with divs

Site Name / Products / About Us (div)

Running Shoes (just bold text) / Content... (div)

Try it: Screen reader landmark navigation and heading jumps don't work at all. There is no 'Skip to main content' link, so you must Tab through every header link each time.

<!-- ❌ Everything is a div -->
<body>
  <div class="header">
    <div class="logo">Site Name</div>
    <div class="menu">Products / About Us</div>
  </div>
  <div class="content">
    <div class="title">Running Shoes</div>
    <div>Main content...</div>
  </div>
  <div class="footer">&copy; 2026 Site Name</div>
</body>
<!-- No landmarks at all, no headings either -->

Bad / Avoid

Problems with this implementation:

No landmarks — Cannot navigate by region to main, nav, banner, etc.
No headings — Without <h1> or other heading elements, heading navigation cannot reveal the page structure.
No skip link — Must Tab through all header links to reach the content every time.
Meaning depends on visuals alone — Without CSS, it is just a wall of plain text.

Tip

If you must use <div>, you would need to manually add role="banner" /role="main", etc. If you use<header> / <main> from the start, the roles come for free.

Implementation Checklist

Page regions are marked with <header> / <nav> / <main> / <footer>
There is only one <main> per page
There is only one <h1> per page and heading levels do not skip
When there are multiple <nav> elements, they are distinguished with aria-label
Supplementary content is placed in <aside>
A skip link is present at the top and visible on focus
All primary content on the page is contained within a landmark

Source (English):Landmarks Pattern — W3C APG(opens in a new tab)