Landmark No Duplicate Banner
Minor - WCAG LEVEL AAA
The issue at hand is the presence of multiple banner landmarks within a single document. The banner landmark is typically associated with the header of a webpage and is used to identify the site's main branding or navigational elements. Having more than one banner landmark can confuse users who rely on assistive technologies, such as screen readers, as they may expect a single, consistent entry point for site-wide navigation or branding information.
For users with disabilities, especially those using screen readers, a single banner landmark provides a reliable way to quickly locate and navigate to the main header of the page. This is crucial for efficient navigation and understanding of the page's structure.
To fix this issue
Ensure that your HTML document contains only one
<header>element with therole="banner"attribute, or simply one<header>element if it is used as the banner.If multiple headers are necessary for visual or organizational purposes, only one should be designated as the banner.
Best practices:
Use semantic HTML elements appropriately. The
<header>element should be used for the top of the page or section headers, but only one should serve as the main banner.Avoid using multiple
<header>elements withrole="banner"unless they are part of separate, distinct documents or applications.
Common mistakes:
Using multiple
<header>elements indiscriminately across the page without considering their roles or failing to remove therole="banner"from secondary headers.Developers should also be cautious about including banner roles in dynamically loaded content that might duplicate existing landmarks.