Heading Accessibility Mistakes to Avoid
Clear, well‑structured headings do more than make a page look organized. They help people using screen readers understand your content, let keyboard users move through a page efficiently, and give everyone a better reading experience.
When headings are done wrong, the entire page becomes harder to use, even if it looks fine visually.
Below are the most common heading accessibility issues we see during audits, why they matter, and how to fix them in a few easy steps.
In This Article
Mistake 1: Skipping Heading Levels
Mistake 2: Using Headings for Design Instead of Structure
Mistake 3: Using Multiple H1 Headings
Mistake 4: Writing Vague Heading Text
Mistake 5: Empty or Visually Hidden Headings
Why Does Heading Structure Matter for Accessibility?
Headings create a logical outline of your page. Assistive technologies rely on that outline to help users skim, jump between sections, and understand how content is organized.
Think of headings like a table of contents, not a design tool.
1. Skipping Heading Levels
This is one of the most common issues we see.
Skipping heading levels usually happens when someone is focused on how a heading looks instead of the structure it is meant to provide.
For example, a business owner might use an H1 for the page title, then jump straight to an H3 because it visually matches their design. To someone using a screen reader, that feels like jumping from chapter one straight to the middle of chapter two without any context.
Screen reader users rely on heading order to understand how content is grouped. When levels are skipped, the page outline stops making sense.
How to fix it
Use headings in a logical order:
One H1 for the main page topic
H2s for major sections
H3s for content that belongs under an H2
If the size or spacing doesn’t look right, that’s a design issue, not a heading issue. Adjust the styling, not the heading level.
2. Using Headings for Design Instead of Page Structure
As mentioned above, headings are often used as a design choice.
It’s easy to drag in a text block, click a dropdown, and choose a heading level simply because it looks bold or stands out. The problem is that headings aren’t meant to be design shortcuts.
We see this a lot in visual website builders like Squarespace and Wix.
These platforms are meant to be easy to use for the average person who doesn't understand or want to learn how to code. They just want their site to look a certain way.
But it's important to understand that headings are meant to organize a page .
If they are used for the design, it creates a confusing experience for screen reader and keyboard users.
How to fix it
Only use headings when they introduce or describe the content that follows. For visual emphasis, use paragraph text with styling, buttons, or callout blocks instead of headings.
3. Using Multiple H1 Headings on a Single Page
This often happens because a platform allows it, not because it’s a good idea.
While modern HTML technically allows multiple H1s, many screen reader users still expect one clear page title that explains what the page is about.
For example, a homepage might have an H1 for the hero section, another for services, and another for testimonials. Visually, this can look fine. Structurally, it makes it harder to understand what the main topic of the page actually is.
The best practice here is to use one clear, descriptive H1 for the page’s main purpose. Everything else should follow as H2s and below.
4. Writing Vague or Generic Headings
Vague headings are another frequent issue we see during audits.
Headings like “Learn More,” “Services,” or “Resources” don’t provide enough context on their own. For screen reader users who navigate by headings, this means stopping and exploring each section just to figure out what it contains.
A more helpful heading clearly sets expectations. For example, “Learn More” could become “Learn More About Our Interior design Services,” and "Resources" could be "The Tools We Recommend."
The goal is to write headings so they make sense out of context. A simple test is to read only the headings on the page. If they don’t clearly explain the page, they need work.
5. Empty or Visually Hidden Headings
Sometimes a heading exists in the code but has no visible text. Other times it’s hidden purely for layout purposes.
We see this a lot in WordPress sites, often due to themes, page builders, or empty elements being used to space out content.
For someone using a screen reader, an empty heading is like being told "there’s a section here, but we're not gonna tell you what it's about," leaving them to wonder if they are missing important information or steps to complete what they came to your site to do.
The best way to check for invisible headings is to use an accessibility checker like WAVE. This tool will show you where each heading is, including empty ones.
Quick Heading Accessibility Checklist
Head to a page on your website and use this as a quick self‑check.
One clear H1 per page
Heading levels follow a logical order
Headings describe the content below them
Headings are not used only for visual styling
No empty or unnecessary headings
Heading accessibility issues are easy to overlook, especially when design tools make it simple to change font size without thinking about structure.
Reviewing them is one of the fastest ways to improve accessibility, usability, and SEO at the same time.
Heading Accessibility FAQs
Do I really need to follow heading order exactly?
Yes. Proper heading order (H1, H2, H3...) helps screen reader users understand page structure and move through content efficiently. Skipping levels is like missing a step on a ladder.
Can I have more than one H1 on a page?
Technically, HTML5 allows it, but it's not recommended. For the best accessibility and SEO, stick to one H1 that describes the primary topic of the page.
Are headings important for SEO too?
Yes. Clear, descriptive headings help search engines understand your content and improve readability for all users.
How can I quickly check heading accessibility on my site?
The easiest way is to use a free tool like the WAVE Web Accessibility Evaluation Tool or the "Accessibility" tab in your browser's Inspect element tool.
Want Help Fixing Website Accessibility Issues?
If you’d rather not guess, we can help.
You can explore audits, tutorials, or partnership options right on our website.
