AccessLint Rule: Main landmark should not be nested within another landmark.

About this AccessLint rule

The <main> element identifies the primary content of a page. Screen readers treat it as a landmark, and many provide a keyboard shortcut that lets users jump directly to it. When <main> is nested inside another landmark element such as <nav>, <aside>, <article>, or <section>, some screen readers stop listing it as a top level landmark. Users who rely on landmark navigation may not find the main content area at all, or they may have to dig through a nested landmark hierarchy to reach it.

This problem affects screen reader users most directly. Landmark navigation is one of the primary ways these users orient themselves on a page and skip past repeated content like headers and navigation menus. If the main landmark is buried inside another landmark, that workflow breaks down. The user experience is comparable to hiding the front door of a building behind another door with no signage.

This rule relates to WCAG 2.2 Success Criterion 1.3.1 (Info and Relationships) at Level A. Content structure and relationships conveyed through HTML must be programmatically determinable. A <main> element nested inside a <section> or <nav> creates a structural relationship that misrepresents the role of the main content area. It also relates to best practices around landmark usage described in the WAI-ARIA Landmarks specification, which states that the main landmark should be a top level landmark.

How to fix it

Move the <main> element so that it is not a descendant of any other landmark element. In a typical page structure, <main> should be a direct child of <body>, sitting alongside elements like <header>, <nav>, and <footer>.

If the nesting happened because of a wrapper <section> or layout container, either remove the sectioning element or replace it with a non-landmark element like <div>. A <div> does not create a landmark, so wrapping <main> in a <div> for styling purposes is fine.

Examples

Incorrect: `<main>` nested inside a `<section>`

<body>
  <header>
    <h1>My website</h1>
  </header>
  <section>
    <main>
      <h2>Welcome</h2>
      <p>This is the primary content.</p>
    </main>
  </section>
</body>

Here the <section> element creates a landmark, and <main> is nested within it. Screen readers may not expose <main> as a top level landmark.

Incorrect: `<main>` nested inside a `<nav>`

<body>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
    <main>
      <p>Page content here.</p>
    </main>
  </nav>
</body>

This is a more obvious structural error. The main content is inside the navigation landmark, which is both semantically wrong and breaks landmark navigation.

Correct: `<main>` at the top level

<body>
  <header>
    <h1>My website</h1>
  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </nav>
  <main>
    <h2>Welcome</h2>
    <p>This is the primary content.</p>
  </main>
  <footer>
    <p>Footer content</p>
  </footer>
</body>

The <main> element is a direct child of <body> and is not nested inside any other landmark. Screen readers will list it as a top level landmark, and users can jump to it directly.

Correct: `<main>` wrapped in a non-landmark `<div>`

<body>
  <header>
    <h1>My website</h1>
  </header>
  <div class="layout-wrapper">
    <main>
      <h2>Welcome</h2>
      <p>This is the primary content.</p>
    </main>
  </div>
  <footer>
    <p>Footer content</p>
  </footer>
</body>

A <div> is not a landmark element, so this nesting does not affect how screen readers expose the <main> landmark. This approach works when a layout wrapper is needed for CSS purposes.