What This Rule Checks
A banner landmark (role=”banner”) is used to identify the main header or banner area of a webpage. According to ARIA guidelines, each banner landmark should be top-level and not nested within another landmark, such as role=”main”, role=”navigation”, or role=”contentinfo. This is crucial for screen readers to correctly interpret the structure of a page, helping users navigate easily.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content.
Why This Matters
When the banner landmark is nested inside another landmark, screen readers may not list it as a top-level navigation point. Users navigating by landmarks may miss the site header entirely.
How to Fix
Check Banner Positioning: Ensure that the element marked with role=”banner” is at the top level of the page structure and not contained inside other ARIA landmarks or elements such as role=”main” or role=”navigation”.
Use Only One Banner Per Page: While HTML5 allows multiple <header> elements, ARIA guidelines recommend using only one role=”banner” per page, typically for the site’s main header.
Avoid Landmark Nesting: Make sure that the banner is not nested within other landmarks like role=”main” or role=”contentinfo. Nesting banners can confuse assistive technologies by misrepresenting the page’s structure.
Code Examples
<!-- Banner nested inside another landmark -->
<main>
<header role="banner">
Site Header
</header>
<p>Content</p>
</main>
Copy
<!-- Banner at top level -->
<header role="banner">
Site Header
</header>
<main>
<p>Content</p>
</main>
Copy
Common Mistakes to Avoid
- Nesting <header> inside <main>, <aside>, or other landmarks.
- Placing the site banner inside a <section> element.
- Confusing section headers with the page banner landmark.
Tip: Landmark regions let screen reader users jump directly to key sections of a page. They serve as the accessibility equivalent of a table of contents for page layout. Label landmarks when multiple of the same type exist.