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

“Contentinfo” landmark not top level (A11y Best Practice Violation)

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

Semantics - Lumar Accessibility Thumbnail
NULL NULL
 

What does this accessibility issue mean?

Issue summary: Accessibility landmark with “contentinfo” role is not top-level

The “contentinfo” landmark role attribute is used to identify “footer” content on a page and should only be used once on a page. It should always be used as a top-level accessibility landmark.  

On websites, accessibility landmarks enable blind or visually impaired visitors using screen readers to jump to various sections of a web page. 

Other landmark roles that should only be used on top-level landmarks include:

  • banner
  • main
  • complementary 

Solution:

Ensure the contentinfo landmark is at the top level.

Issue details
  • Accessibility Best Practice
  • Severity: Moderate
  • Category: Semantics (BP)
  • Rule ID: landmark-contentinfo-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: “Contentinfo” landmark not top level (A11y Best Practice Violation)

<!DOCTYPE html>
<html lang='en' class='no-js'>
  <head>
    <title>Online Store</title>
  </head>
  <body>
    <main>
      <h1>Welcome to our store</h1>
      <!-- ... -->
      <nav>
        <ul>
          <li>
            <a href='#'>Home</a>
          </li>
          <li>
            <a href='#'>Products</a>
          </li>
          <!-- ... -->
        </ul>
        <footer role='contentinfo'>
          <!-- Here lies the issue -->
          <p>Copyright © 2022. All Rights Reserved.</p>
        </footer>
      </nav>
    </main>
  </body>
</html>

Explanation: In this code, the 'contentinfo' landmark (the <footer> with role='contentinfo') is nested within a <nav> landmark, which is inside of a <main> landmark. This violates the 'Contentinfo landmark not top level' accessibility rule because it's not at the top level of the HTML document, it's contained within other landmarks.

Here's how you can correct this issue:

 

How to fix "“Contentinfo” landmark not top level (A11y Best Practice Violation)" issue

<!DOCTYPE html>
<html lang='en' class='no-js'>
  <head>
    <title>Online Store</title>
  </head>
  <body>
    <main>
      <h1>Welcome to our store</h1>
      <!-- ... -->
      <nav>
        <ul>
          <li>
            <a href='#'>Home</a>
          </li>
          <li>
            <a href='#'>Products</a>
          </li>
          <!-- ... -->
        </ul>
      </nav>
    </main>
    <footer role='contentinfo'>
      <!-- Now the footer is at the top level -->
      <p>Copyright © 2022. All Rights Reserved.</p>
    </footer>
  </body>
</html>

In the corrected code, the <footer> with role='contentinfo' is now at the top level, directly inside the <body> of the document. It's no longer contained within any other landmark, bringing it in compliance with the 'Contentinfo landmark not top level' accessibility rule.

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform