Screen Reader Users Navigate by Headings and Yours Are a Mess

Your website is basically a choose-your-own-adventure book written by someone who skipped every other page and numbered them wrong. Except instead of a confused reader, you've got a screen reader user trying to navigate with a broken map, and they're not laughing.

Here's the thing nobody wants to admit at the company all-hands: headings aren't just for making text bigger and bolder. For screen reader users - and there are millions of them - headings are literally the table of contents. They're how people understand your site's structure, skip to relevant sections, and avoid wasting time on irrelevant content. So when your headings are a disaster, you're not just being bad at accessibility. You're being bad at basic information architecture.

Let's talk about what's actually happening on your site.

The Great Heading Tragedy: Your H1 is Missing (Or Actively Hiding)

A healthy webpage has exactly one H1 - the main heading that tells people what the page is about. It's foundational. It's basic. It's the semantic equivalent of having a front door on your house.

And yet. Published research suggests that roughly 40% of websites have either no H1 or multiple H1s. That's not a coincidence. That's a conspiracy against assistive technology users.

Some of you have hidden your H1 in a logo. Some have zero H1s because your designer made the page title decorative. One major SaaS platform I tested had seventeen H1s. Seventeen! That's not a table of contents - that's chaos with better font sizing.

Here's the comedy gold part: your screen reader user lands on the page and starts asking "what is this about?" and your site just... doesn't answer. It's like walking into a restaurant where the menu is written in invisible ink and the waiter is also invisible. Technically there's information there. Technically you've followed the rules. But functionally? You've failed.

Skipping Heading Levels: It's Like Taking the Stairs Two at a Time

Picture this scenario: you have an H1, then an H3, then an H5, then back to an H2. Your keyboard-navigating user experiences the cognitive equivalent of a parkour course. This shouldn't be complicated.

Heading hierarchy works like an outline. H1 is your main topic. H2s are major sections under that. H3s are subsections of H2s. If you skip levels, you're breaking the logical structure. A screen reader user navigating by headings hits an H3 and thinks "okay, this is under an H2" except there was no H2. Congratulations, you've created an information vacuum.

One popular retail site I audited went: H1, H2, H4, H2, H3, H1. I nearly needed a flowchart to understand what was actually a subsection and what wasn't. The heading levels were so chaotic, they made the actual content structure impossible to discern. It's the web development equivalent of numbering your chapters as 1, 1, 3, 2, then starting a new book but forgetting to tell anyone.

• H1 to H2: Good. Logical. Healthy.
• H1 to H3: Skipping a level. Confusing.
• H1 to H5: You monster.

Decorative Headings: The Sneakiest Accessibility Crime

This one's insidious because it looks harmless. You use heading tags for visual styling - making something bigger or bolder - without it actually being a semantic heading. It's like wearing a pilot's uniform to a costume party and then getting upset when people think you're a pilot.

Screen readers announce everything marked as a heading as a heading. If you've got twelve decorative headings and three real ones, your users are wading through noise. They navigate by headings expecting to find structural information and instead find a style choice. It's like asking for directions and someone just keeps telling you font sizes.

What You Should Actually Do (The Revolutionary Approach)

Start with one H1 that describes the page's actual purpose. Use H2s for major sections. Use H3s for subsections of H2s. Don't skip levels. Don't use heading tags as decorative styling - use CSS instead. This is not rocket science. This is 1998-era web standards we're talking about.

If you're panicking that this will break your design, you don't have a design problem. You have a CSS problem. And CSS can be fixed in approximately five minutes.

Go right now and open your site in a browser. Hit H to navigate by headings (this works in most screen readers and some browser extensions). Is the structure clear? Could you understand the entire page just from heading navigation? If the answer is "absolutely not," you've got work to do.

Use SCOUTb2 or any decent auditing tool to scan your pages. Look for missing H1s, skipped heading levels, and decorative headings. Then fix them. Your screen reader users will appreciate it. Your information architecture will improve. Everyone wins.

Disclaimer: This article is for informational purposes only and does not constitute legal, professional, or compliance advice. SCOUTb2 is an automated scanning tool that helps identify common issues but does not guarantee full compliance with any standard or regulation.