Landmark Banner Is Top Level
Minor - WCAG LEVEL AAA
The banner landmark is a designated area of a webpage that typically contains the site’s branding, logo, and primary navigation. For accessibility purposes, it must be positioned at the top level of the document structure. If the banner landmark is nested within other elements (like main, article, or section), it can confuse screen readers and other assistive technologies, making navigation difficult for users.
For users who rely on screen readers, the correct placement of landmarks is crucial. Screen readers use these landmarks to help users navigate the page efficiently. If the banner is not at the top level, users may miss important navigation elements or branding information, leading to a frustrating experience. Proper document structure enhances usability for keyboard users as well, allowing them to jump to specific sections of the page more easily.
How to Fix:
Identify the Current Structure: Review your HTML to see where the
bannerlandmark is currently placed.Move the Banner to the Top Level: Ensure that the
bannerelement is a direct child of the<body>tag, not nested within other elements.Use Semantic HTML: Use the
<header>element to define thebannerlandmark, as it is semantically appropriate for this purpose.
Best Practices:
Always place the
bannerlandmark at the top level of your document structure.Use semantic HTML elements like
<header>,<nav>, and<footer>to define landmarks clearly.Ensure that the
bannercontains meaningful content that aids in navigation, such as site branding and primary navigation links
Common Mistakes:
Nesting the
bannerlandmark within other sections or articles, which can lead to confusion.Using non-semantic elements (like
<div>) for thebannerinstead of semantic elements like<header>, which can reduce clarity for assistive technologies.