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

Multiple banner landmarks (A11y Best Practice Violation)

How to fix the web accessibility issue of multiple “banner” accessibility landmarks present on a page — Lumar Web Accessibility Wiki

Semantics - Lumar Accessibility Thumbnail

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 


Ensure each page only has one banner landmark.  Do not use multiple accessibility landmarks with duplicate “banner” role attributes on a single page.

Issue details
  • Accessibility Best Practice
  • Severity: Moderate
  • Category: Semantics (BP)
  • Rule ID: landmark-no-duplicate-banner

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: Multiple banner landmarks (A11y Best Practice Violation)

 <header role="banner">
   <h1>First banner landmark</h1>
 <div role="banner">
   <h1>Second banner landmark</h1>
<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>
 <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).

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform