Headings play a vital role in structuring web content. While they’re often used to style text and create visual breaks on a page, their true value lies in how they define the content’s structure—particularly for screen reader users and other assistive technologies.
Inaccessible or incorrectly structured headings are one of the most common—and easily preventable—barriers on the web. This post explores the importance of correct heading hierarchy, who it affects, how to do it right, and how improper use can hinder accessibility.
What Is a Heading Hierarchy?
Heading hierarchy refers to the logical, nested order of headings on a webpage. HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). These are not just used to make text bold or large—they define the structure of a page in a way that both users and assistive technologies can interpret.
Here’s how headings should be structured:
- <h1> – Main title of the page (used only once per page)
- <h2> – Main sections under the <h1>
- <h3> – Subsections under each <h2>
- <h4> – Subsections under each <h3> (and so on)
A correct heading structure looks like this:
<h1>Recipes</h1>
<h2>Breakfast</h2>
<h3>Healthy Smoothies</h3>
<h3>Egg Dishes</h3>
<h2>Lunch</h2>
<h3>Salads</h3>
<h2>Dinner</h2>
<h3>Vegetarian Options</h3>Why Does Heading Sequence Matter?
Correct heading hierarchy is critical for:
- Screen reader users: Headings are used to navigate pages efficiently. Many screen reader users browse a webpage by jumping between headings, forming a mental map of the content structure.
- Keyboard-only users: Headings act as landmarks, helping users scan and locate sections without needing to scroll or click.
- SEO: Search engines use heading hierarchy to understand the structure and key themes of a page. A logical structure contributes to better ranking and clearer indexing.
- Everyone else: Even sighted users benefit from a logical heading structure. It improves readability, scannability, and the overall user experience.
Who Is Affected?
Incorrect heading structures particularly impact:
- Visually impaired users who rely on screen readers.
- Users with cognitive disabilities who benefit from clear content organisation.
- People using alternative navigation methods, such as voice control or switch devices.
- Mobile users, where responsive design combined with logical headings supports better user flow on smaller screens.
Ultimately, poor heading hierarchy doesn’t just exclude disabled users—it negatively affects all users to some extent.
Common Mistakes in Heading Usage
Skipping Heading Levels
Jumping from an <h1> straight to an <h4> without passing through <h2> or <h3> creates confusion in the content’s structure.
Incorrect:
<h1>Our Services</h1> <h4>Web Development</h4>Correct:
<h1>Our Services</h1> <h2>Web Development</h2>Using Headings for Styling Only
Using a heading tag simply to increase font size or make something bold dilutes the purpose of headings. This is often done with <h3> or <h4> to make subtext look prominent, regardless of structure.
Bad practice:
<h3>Call us today!</h3> <!-- Used as a visual element rather than a structural heading -->Instead, use CSS for styling and reserve heading tags for structural content.
Better approach:
<p class="highlight">Call us today!</p>Multiple <h1> Tags on One Page
Although HTML5 allows more than one <h1> per page when using sectioning elements (like <article> or <section>), it’s best practice to have one main <h1> representing the primary topic of the page.
Too many <h1> tags can be confusing to users relying on assistive technologies.
The Impact of Poor Heading Structure
For Screen Reader Users
Improper heading sequence can make navigation extremely difficult. Imagine opening a book with the chapters and subheadings randomly ordered or missing—it would be nearly impossible to understand or find anything efficiently.
Screen reader users often bring up a list of headings to skim content and jump to relevant sections. If the heading structure is broken or illogical, the page becomes disorganised and disorienting.
For Cognitive Impairments
Users with dyslexia, ADHD, or memory issues rely on consistent, predictable structures. A jumbled heading sequence increases cognitive load and frustration, making the site less usable or even inaccessible.
For Website Owners
Failing to implement a proper heading structure can lead to:
- Lower user engagement
- Higher bounce rates
- SEO penalties
- Legal consequences under accessibility laws (e.g. Equality Act 2010 or the Public Sector Bodies Accessibility Regulations in the UK)
Best Practices for Accessible Heading Structure
- Use only one <h1> per page to define the main topic.
- Follow a logical order, without skipping heading levels.
- Style with CSS, not heading tags—use classes and styles for visual changes.
- Keep headings descriptive, not vague. A heading like “Introduction” is less helpful than “Introduction to Our Services”.
- Test your site with a screen reader or use browser extensions to check heading order and structure.
- Write for clarity, using headings to break up long text blocks and improve scan-ability.
Tools to Help Check Heading Structure
Here are some helpful tools for auditing heading hierarchy:
- WAVE (Web Accessibility Evaluation Tool): Highlights heading levels and accessibility issues on any web page.
- axe DevTools (by Deque): A Chrome extension that includes heading structure checks.
- HeadingsMap (Firefox/Chrome): Visualises the heading structure of a web page.
- Screen readers: Try NVDA or VoiceOver to experience your site from a user’s perspective.
Conclusion
Heading hierarchy is a fundamental yet often overlooked part of accessible web design. It’s not just about how content looks—it’s about how content is experienced. A well-structured site enables all users, regardless of ability, to navigate, understand, and engage with your content.
Taking the time to implement correct heading sequence is a small effort that yields significant benefits—for accessibility, SEO, usability, and user satisfaction.
Remember: structure first, style second.