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.
Solution:
Ensure the order of headings is semantically correct on the page
Example HTML violation: Headings on page have invalid logical order (A11y Best Practice Violation)
<header>
<h1>Welcome to Best Online Store</h1>
</header>
<h3>Featured Products</h3>
<h2>Latest Blog Posts</h2>
<footer>
<h4>Contact Us</h4>
</footer>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
<header>
<h1>Welcome to Best Online Store</h1>
</header>
<h2>Featured Products</h2>
<h3>Latest Blog Posts</h3>
<footer>
<h4>Contact Us</h4>
</footer>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.
