Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Banner landmark not top level (A11y Best Practice Violation)

How to fix the web accessibility issue of “banner” accessibility landmarks not being top-level — Lumar Web Accessibility Wiki

Semantics - Lumar Accessibility Thumbnail

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. 


Ensure the accessibility landmark marked with a “banner” role attribute is at the top level.  

Issue details
  • WCAG Best Practice
  • Severity: Moderate
  • Category: Semantics (BP)
  • Rule ID: landmark-banner-is-top-level

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

Example HTML violation: Banner landmark not top level (A11y Best Practice Violation)

<div role="navigation">
<div role="banner">
<h1>Welcome to my page</h1>

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 role="navigation">
<!-- Any navigation links would go here -->

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.

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform