What does this accessibility issue mean?
Issue summary: Multiple “banner” landmarks are present on a page
To comply with website accessibility best practices, there should only be one “banner” role landmark per page.
On websites, accessibility landmarks enable blind or visually impaired visitors using screen readers to more easily jump to various sections of a web page.
Other landmark roles that should only be used once per page:
- main
- contentinfo
- complementary
Solution:
Ensure each page only has one banner landmark. Do not use multiple accessibility landmarks with duplicate “banner” role attributes on a single page.
Example HTML violation: Multiple banner landmarks (A11y Best Practice Violation)
<header role="banner">
<h1>First banner landmark</h1>
</header>
<div role="banner">
<h1>Second banner landmark</h1>
</div>
<h1>Main content area</h1> This is the main content area.Explanation: The above HTML violates the landmark-no-duplicate-banner accessibility rule because it contains two banner landmarks: one defined by <header role="banner"> and another defined by <div role="banner">.
To comply with the rule, you need to decide which landmark to keep and remove the other.
How to fix "Multiple banner landmarks (A11y Best Practice Violation)" issue
<header role="banner">
<h1>First banner landmark</h1>
</header>
<h1>Main content area</h1> This is the main content area.In this corrected version, I've removed the second banner landmark (<div role="banner">). This leaves us with only one banner landmark as per the rules of the Web Content Accessibility Guidelines (WCAG) set by the W3C Web Accessibility Initiative (WAI).
