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

Headings on page have invalid logical order (A11y Best Practice Violation)

How to fix the web accessibility issue of page headings (H1, H2, H3, etc.) not following a logical order — Lumar Web Accessibility Wiki

Semantics - Lumar Accessibility Thumbnail

What does this accessibility issue mean?

Issue summary: Headings on page do not follow a logical order

Headings on a webpage (for example, <h1>, <h2>, <h3>, etc.) should follow a logical order, where lower-level headings follow a higher-level heading. 

For example, an <h2> should not appear before an <h1> has already appeared on the page. 

This can help users who rely on assistive technologies to better understand the hierarchy and structure of the content on the page.


Ensure the order of headings is semantically correct on the page

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

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: Headings on page have invalid logical order (A11y Best Practice Violation)

   <h1>Welcome to Best Online Store</h1>
<h3>Featured Products</h3>
 <h2>Latest Blog Posts</h2> 
   <h4>Contact Us</h4>

Explanation: This code violates WCAG's heading order guideline because the hierarchy of h2 and h3 is incorrect.


How to fix "Headings on page have invalid logical order (A11y Best Practice Violation)" issue

   <h1>Welcome to Best Online Store</h1>
 <h2>Featured Products</h2>
 <h3>Latest Blog Posts</h3>
   <h4>Contact Us</h4>

In the corrected HTML, "Featured Products" and "Latest Blog Posts" are marked up with h2 and h3 respectively. This follows the correct and logical order of headings, ensuring that users using assistive technologies can effectively understand the structure of the content.

This modification complies with the WCAG guideline 1.3.1, which advises structuring content in a meaningful way.

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform