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

Main landmark not top level (A11y Best Practice Violation)

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

Semantics - Lumar Accessibility Thumbnail
NULL NULL
 

What does this accessibility issue mean?

Accessibility issue summary: accessibility landmark with “main” role is not top-level

If an accessibility landmark has “main” as its role attribute, it should always be used as a top-level landmark. Main landmarks should only be used to mark the main content area of the webpage. 

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
  • contentinfo 
  • complementary 

Solution:

Ensure accessibility landmarks with a “main” role attribute are top-level landmarks on a page. 

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

 <header>
   <h1>Welcome to Our Website</h1>
 </header>
 <nav>
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Contact</a>
 </nav>
 <div role="navigation">
   <div role="main"> This is the main content of web page. </div>
 </div>

The above HTML violates the landmark-main-is-top-level accessibility rule because the "main" landmark is nested within another landmark, specifically the "navigation" landmark. This is problematic because the main landmark should be at the top level of the document structure.

To rectify this issue, the "main" landmark should be removed from the "navigation" landmark.

Additionally, it is recommended to use the <main> tag instead.

 

How to fix "Main landmark not top level (A11y Best Practice Violation)" issue

 <header>
   <h1>Welcome to Our Website</h1>
 </header>
 <nav>
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Contact</a>
 </nav> This is the main content of web page.

In this version the <main> tag is used as the "main" landmark outside of the navigation landmark which is created using </main><nav> tag. This complies with the landmark-main-is-top-level accessibility rule as specified by the W3C.

Learn more here at the W3C Accessibility Initiative.</nav>

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform