Use proper heading hierarchy
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Headings define the structure of your content for screen readers and keyboard users. When heading levels are skipped or out of order, navigation becomes confusing and logical flow is lost.
How to fix this issue
Start with <h1> for the page title, followed by <h2> for sections, and <h3> for subsections. Avoid jumping from <h1> to <h4> or using headings purely for styling.
Developer guidance
Use CSS for visual style — not heading size. Keep one <h1> per page and ensure nested sections follow logical hierarchy.
Code examples
Incorrect Implementation
<h1>Title</h1><h4>Subsection</h4>Correct Implementation
<h1>Title</h1><h2>Subsection</h2>
Trusted by organizations across Europe working toward WCAG and EAA conformance