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

Missing “main” landmark (A11y Best Practice Violation)

How to fix the website accessibility issue of "main" accessibility landmarks missing on a page — Lumar Web Accessibility Wiki

Semantics - Lumar Accessibility Thumbnail
NULL NULL
 

What does this accessibility issue mean?

Issue summary:  Page is missing a “main” landmark role

To comply with website accessibility best practices, you should use accessibility landmarks on your web pages. 

A “main” accessibility landmark role is used to mark the main content of the page for visitors who use screen readers or other assistive technologies. Main landmark roles should only be used once per page, and should always be used as a top-level landmark.

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

Solution:

Ensure each page on your website has an accessibility landmark with a “main” role defined.

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

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: Missing “main” landmark (A11y Best Practice Violation)

<!DOCTYPE html>
<html lang='en' class='no-js'>
  <head>
    <title>My Ecommerce Site</title>
  </head>
  <body>
    <header>
      <!-- ... Site title, navigation, search, etc ... -->
    </header>
    <section class="featured-products">
      <!-- ... Featured products grid ... -->
    </section>
    <footer>
      <!-- ... Site footer ... -->
    </footer>
  </body>
</html>

Explanation: This HTML code violates the 'landmark-one-main' accessibility rule because there is no main landmark.

The main landmark is used to designate the primary content of the page and to allow users, especially those using screen readers, to directly navigate to the primary content of the page. Without a main landmark, users may have difficulty locating or navigating to the primary content of the page.

The corrected HTML code with one main landmark is shown below:

 

How to fix "Missing “main” landmark (A11y Best Practice Violation)" issue

<!DOCTYPE html>
<html lang='en' class='no-js'>
  <head>
    <title>My Ecommerce Site</title>
  </head>
  <body>
    <header>
      <!-- ... Site title, navigation, search, etc ... -->
    </header>
    <main id="content">
      <section class="featured-products">
        <!-- ... Featured products grid ... -->
      </section>
    </main>
    <footer>
      <!-- ... Site footer ... -->
    </footer>
  </body>
</html>

In the corrected code, a main landmark is added, this landmark wraps around the featured-products section, indicating that this is the primary content of the page. As a result, the page now adheres to the 'landmark-one-main' accessibility rule.

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform