landmark-banner-is-top-level
Web validation
A page-level banner landmark identifies the global site header so assistive-technology users can jump to it quickly. When a banner is nested inside another landmark such as main, article, or navigation, screen readers may encounter multiple, conflicting headers and loss of the shortcut value. Keep one, top-level banner to preserve a clear, predictable page outline.
Note:
Native HTML elements such as <aside>, <header>, and <footer> may appear inside other landmarks (for example, inside <main>). They do not inflate the landmark list because browsers expose them to AT only when they occur at the document root.
In contrast, ARIA roles are always exposed. When you nest <div role="banner"> inside another landmark, every screen reader receives an extra landmark entry. The result is an over-crowded landmark rotor, making navigation slower and error-prone.
Pass Patterns
The banner is in the document’s top level
The banner landmark sits directly under <body>, making it located in a predictable place, and easy to find.
<body>
<header role="banner">
<img src="logo.svg" alt="Company logo" />
<!-- global navigation -->
</header>
<main>
<!-- Page content -->
</main>
<footer>
<p>Brought to you by North American Zoo Partnership</p>
</footer>
</body>Fail Patterns
The banner is a descendant of a main landmark
The banner landmark is incorrectly wrapped by another landmark (main in this case).
<body>
<main>
<header role="banner">
<img src="logo.svg" alt="Company logo" />
</header>
<!-- Page content -->
</main>
<footer>
<p>Brought to you by North American Zoo Partnership</p>
</footer>
</body>Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
Open a screen reader and press the landmark shortcut (for example, “D“ in NVDA or “VO + Command + N“ in VoiceOver) to cycle through landmarks.
Expected result: The screen reader announces one banner landmark before any other landmarks.
Actual result: The screen reader’s first announcement is another landmark (for example, main), and the banner is announced later.
FAQ
Why is this validation considered a best practice?
While not tied to a specific WCAG success criterion, a top-level banner maintains a predictable landmark hierarchy that improves keyboard and screen-reader navigation across modern assistive technologies and browsers.
Why is this issue marked as Moderate?
Users can still reach page content, but nested or duplicated banner landmarks slow navigation and increase cognitive load. The issue affects all screen-reader users and can surface inconsistently across browsers, so it warrants attention yet is not blocking.