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

Page is missing level-one (h1) heading (A11y Best Practice Violation)

How to fix the website accessibility issue of pages missing h1 elements — Lumar Web Accessibility Wiki

Semantics - Lumar Accessibility Thumbnail
 

What does this accessibility issue mean?

Issue summary: page is missing an <h1> element (level-one heading)

To comply with digital accessibility best practices, there should be at least one <h1> (level one heading) per page on your website. 

This should contain the main heading of the page and it should be the first heading element on the page. 

If your page does not include an h1, it may cause issues for visitors using assistive technologies like screen readers. 

Solution:

Ensure that each page — or at least one of its frames — contains a level-one heading (h1). 

Issue details
  • Accessibility Best Practice
  • Severity: Moderate
  • Category: Semantics (BP)
  • Rule ID: page-has-heading-one

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: Page is missing level-one (h1) heading (A11y Best Practice Violation)

 <nav>
   <ul>
     <li>
       <a href="#">Home</a>
     </li>
     <li>
       <a href="#">Products</a>
     </li>
     <li>
       <a href="#">Contact</a>
     </li>
   </ul>
 </nav>
 <div> Welcome to our ecommerce website!
   <!-- More content... -->
 </div>

Explanation: This code violates the accessibility rule because it is missing a level-one heading (<h1>). According to the accessibility rule (rule-id: 'page-has-heading-one'), each page should begin with an </h1> <h1> heading as it helps with the overall structure of the webpage and makes it easier for assistive technologies to understand the main content of the page.</h1>

Here's the corrected code with a level-one heading:

 

How to fix "Page is missing level-one (h1) heading (A11y Best Practice Violation)" issue

 <nav>
   <ul>
     <li>
       <a href="#">Home</a>
     </li>
     <li>
       <a href="#">Products</a>
     </li>
     <li>
       <a href="#">Contact</a>
     </li>
   </ul>
 </nav>
 <div>
   <h1>Welcome to our ecommerce website!</h1>
   <!-- More content... -->
 </div>

Now, the corrected code has a level-one heading (<h1>) which gives the overall context and provides structure to the webpage content.

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform