Accessibility Rule: Banner landmark should not be contained in another landmark

About This Accessibility Rule

Landmarks provide a structural map of a page’s layout that screen reader users rely on to quickly jump between major sections — the header, navigation, main content, footer, and so on. The banner landmark specifically represents the site-wide header area, typically containing the logo, site title, and primary navigation.

When a banner landmark is nested inside another landmark (for example, inside a <main> element or a <nav> element), screen readers present it as a subordinate section rather than a top-level region of the page. This breaks the expected page structure and makes it significantly harder for blind and deafblind users to orient themselves. Instead of finding the banner at the top level of the landmark tree, they encounter it buried within another region, which undermines the purpose of landmarks entirely.

This rule is a Deque best practice for accessible landmark structure. While it doesn’t map to a specific WCAG success criterion, it directly supports the principles behind WCAG 1.3.1 Info and Relationships (ensuring structural information is programmatically determinable) and WCAG 2.4.1 Bypass Blocks (providing mechanisms to skip repeated content).

How to Fix It

Identify the banner landmark — Look for any <header> element that is a direct child of <body> (which automatically has the banner role) or any element with role="banner".
Check if it’s nested — Determine whether the banner is contained inside another landmark element such as <main>, <nav>, <aside>, <section> (with an accessible name), or any element with an ARIA landmark role.
Move it to the top level — Restructure your HTML so the banner landmark is a direct child of <body>, outside of any other landmark.

Keep in mind that a <header> element only has the implicit banner role when it is not nested inside <article>, <aside>, <main>, <nav>, or <section>. When nested inside those elements, <header> has no implicit landmark role and won’t trigger this rule. However, if you explicitly add role="banner" to a nested element, or if your page structure inadvertently places the top-level <header> inside another landmark, the issue will be flagged.

Examples

Incorrect: Banner Nested Inside Main Landmark

In this example, the <header> with role="banner" is placed inside <main>, making it a nested landmark.

<body>
  <main>
    <header role="banner">
      <h1>My Website</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
    <p>Main content goes here.</p>
  </main>
</body>

Incorrect: Banner Inside a Navigation Landmark

<body>
  <nav aria-label="Site navigation">
    <div role="banner">
      <img src="logo.png" alt="Company Logo">
    </div>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <main>
    <p>Main content goes here.</p>
  </main>
</body>

Correct: Banner as a Top-Level Landmark

The <header> is a direct child of <body>, making it a proper top-level banner landmark.

<body>
  <header>
    <h1>My Website</h1>
    <nav aria-label="Primary">
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <p>Main content goes here.</p>
  </main>
  <footer>
    <p>&copy; 2024 My Website</p>
  </footer>
</body>

Correct: Using `role="banner"` at the Top Level

<body>
  <div role="banner">
    <h1>My Website</h1>
    <nav aria-label="Primary">
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </div>
  <main>
    <p>Main content goes here.</p>
  </main>
</body>

Note that using the native <header> element is preferred over role="banner" on a <div>, since native HTML semantics are more robust and widely supported.

Learn more: