What does this accessibility issue mean?
Issue summary: Accessibility landmark with “banner” role is not top-level
On websites, accessibility ‘landmarks’ enable blind or visually impaired visitors using screen readers to jump to various sections of a web page.
When defining the “role” attribute for an accessibility landmark as a “banner”, it should only be used on top-level landmarks. This is because the banner role should be reserved for the primary header banner or masthead of the page.
Other landmark roles that should only be used on top-level landmarks include:
- complementary
- main
- contentinfo
If accessibility landmark roles are incorrectly defined or incorrectly structured it can cause issues for users of assistive technologies such as screen readers that rely on these landmarks to easily navigate webpages.
Solution:
Ensure the accessibility landmark marked with a “banner” role attribute is at the top level.
Example HTML violation: Banner landmark not top level (A11y Best Practice Violation)
<div role="navigation">
<div role="banner">
<h1>Welcome to my page</h1>
</div>
</div> Explanation: The violation of the landmark-banner-is-top-level accessibility rule is due to the banner landmark being nested within another landmark, in this case, the navigation landmark.
This violates the rule because the banner landmark should be at the top level, not nested within another landmark.
How to fix "Banner landmark not top level (A11y Best Practice Violation)" issue
<div role="banner">
<h1>Welcome to my page</h1>
</div>
<div role="navigation">
<!-- Any navigation links would go here -->
</div> This version moves the banner landmark out of the navigation landmark, so it's no longer nested and doesn't violate the landmark-banner-is-top-level rule. Additionally, since a web page should have at most one banner landmark because of the landmark-no-duplicate-banner rule, this version of the code is appropriate for most web designs. Whether they are specified using ARIA or HTML5, landmarks should not be nested within one or more other landmarks.
For more details about these accessibility rules you can visit:
Moreover, always try to ensure each landmark is distinctive and placed at the correct position in the document's structure to improve the user browsing experience especially for users of assistive technologies.
