What This Rule Checks
The role=”banner” ARIA landmark, which is used to represent site-wide header content, should appear only once on a webpage. While HTML5 allows for multiple <header> elements, it is best practice to ensure that there is only one banner landmark to avoid confusion, especially for screen reader users.
Who Is Affected
This issue primarily affects: Sighted Keyboard Users users, who can see the screen but navigate exclusively with a keyboard; 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
Multiple banner landmarks confuse screen reader users who expect a single site header. When navigating to “banner,” they may land on the wrong one and struggle to find the primary navigation.
How to Fix
Remove Duplicate Banner Landmarks: Check your HTML document and make sure that only one element has the role=”banner” attribute. If multiple banner landmarks exist, remove the extras.
Limit to One Banner per Page: Even though the HTML5 specification allows for multiple <header> elements, it is recommended that only one banner landmark be included in the page structure for clarity.
Code Examples
<!-- Multiple banners -->
<header role="banner">
Primary nav
</header>
<header role="banner">
Secondary nav
</header>
Copy
<!-- Single banner -->
<header role="banner">
<nav>
Primary nav
</nav>
<nav>
Secondary nav
</nav>
</header>
Copy
Common Mistakes to Avoid
- Using multiple <header> elements that all resolve to role=”banner” at the top level.
- Not realizing that <header> as a direct child of <body> automatically becomes a 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.