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

Duplicate landmark roles used on a page (A11y Best Practice Violation)

How to fix the website accessibility issue of duplicate landmark roles used on a page — Lumar Web Accessibility Wiki

Semantics - Lumar Accessibility Thumbnail
NULL NULL
 

What does this accessibility issue mean?

Accessibility issue summary:  duplicate landmark roles are used on a page

Each accessibility landmark on a given page of your website should have a unique role — or role/label/title — assigned. Do not use duplicate landmark names on a single web page. 

Accessibility landmarks enable blind or visually impaired visitors using screen readers to more easily jump to various sections of a web page. 

Solution: 

Ensure all landmarks on a single web page have a unique role or unique role/label/title combination. 

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

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: Duplicate landmark roles used on a page (A11y Best Practice Violation)

<!DOCTYPE html>
<html lang='en' class='no-js'>
  <head>
    <title>Ecommerce Website</title>
  </head>
  <body>
    <header>
      <h1>Online Shop</h1>
    </header>
    <main>
      <h2>Products</h2>
    </main>
    <main>
      <h2>Best Sellers</h2>
    </main>
    <footer>Copyright © 2020 Online Shop</footer>
  </body>
</html>

Explanation: In this example, there are two <main> elements which act as landmarks in the document. The 'Landmark is unique' rule (rule-id: 'landmark-unique') requires each landmark to be uniquely identifiable. Having two landmarks of the same type without unique roles, labels, or titles violates this rule, which can pose challenges for assistive technologies like screen readers, and ultimately the users depending upon these technologies. Here, screen readers may not be able to differentiate between the two <main> sections, creating confusion for the user.

Here is the corrected HTML with the 'Landmark is unique' accessibility rule followed:

 

How to fix "Duplicate landmark roles used on a page (A11y Best Practice Violation)" issue

<!DOCTYPE html>
<html lang='en' class='no-js'>
  <head>
    <title>Ecommerce Website</title>
  </head>
  <body>
    <header>
      <h1>Online Shop</h1>
    </header>
    <main>
      <h2>Products</h2>
    </main>
    <section>
      <h2>Best Sellers</h2>
    </section>
    <footer>Copyright © 2020 Online Shop</footer>
  </body>
</html>

Here, we have replaced the second <main> landmark with a <section> element. Each of the landmarks now have unique roles, fulfilling the 'Landmark is unique' rule.

Now screen readers and other assistive technologies can more effectively understand and navigate this webpage.For best practices in creating accessible websites, refer to the Accessibility resources provided by the Web Accessibility Initiative of the World Wide Web Consortium (W3C).

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform