AccessLint Rule: Page should not have more than one banner landmark.

About this AccessLint rule

A banner landmark identifies site-wide content at the top of a page, such as a logo, site title, navigation, or search form. In HTML, a <header> element that is not nested inside a sectioning element (<article>, <section>, <aside>, or <nav>) is automatically assigned the banner role. When a page contains more than one banner landmark, assistive technology users lose the ability to quickly and reliably jump to the site-wide header, because the landmark becomes ambiguous.

Screen reader users rely on landmark navigation to move through a page efficiently. Most screen readers provide a shortcut to list all landmarks or jump directly to a specific one. If two or more banners exist, a user looking for the site header has to guess which banner is the right one. This slows navigation and creates confusion, especially on long or complex pages.

This rule relates to WCAG 2.2 Success Criterion 1.3.1 (Info and Relationships) at Level A. Content structure and relationships conveyed visually must also be programmatically determinable. Having duplicate banner landmarks misrepresents the page structure to assistive technology: it signals two site-wide headers when there is only one.

How to fix it

The fix depends on why multiple banner landmarks exist:

If the page has a single site-wide header, make sure only one <header> element sits at the top level of the <body> (outside any sectioning elements). Remove or restructure any extra top-level <header> elements.
If other <header> elements are used inside sections of content, nest them inside <article>, <section>, or <aside>. A <header> nested inside a sectioning element does not receive the banner role and will not conflict with the page-level banner.
If an element other than <header> has role="banner" applied explicitly, remove that role or change it to something more appropriate.

Examples

Incorrect: two top-level `<header>` elements

Both <header> elements below are direct children of <body>, so both become banner landmarks.

<body>
  <header>
    <a href="/">My Site</a>
    <nav>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <h1>Welcome</h1>
  </main>

  <header>
    <p>Secondary header content</p>
  </header>
</body>

Correct: one top-level `<header>`, other headers nested in sections

The site-wide <header> is the only top-level one. The second <header> is inside an <article>, so it is scoped to that article and does not create a second banner landmark.

<body>
  <header>
    <a href="/">My Site</a>
    <nav>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Blog post title</h1>
        <p>Published on January 5, 2024</p>
      </header>
      <p>Article content goes here.</p>
    </article>
  </main>
</body>

Incorrect: explicit `role="banner"` creating a duplicate

<body>
  <header>
    <a href="/">My Site</a>
  </header>

  <div role="banner">
    <p>Another banner</p>
  </div>

  <main>
    <h1>Page title</h1>
  </main>
</body>

Correct: removing the redundant `role="banner"`

<body>
  <header>
    <a href="/">My Site</a>
  </header>

  <div>
    <p>Supplementary content</p>
  </div>

  <main>
    <h1>Page title</h1>
  </main>
</body>