Screen Reader Users Navigate by Headings and Yours Are a Mess

The Heading Hierarchy Nobody Asked For (But Everyone's Suffering Through)

Picture this: You're trying to navigate a website using a screen reader, and instead of a logical table of contents, you get what can only be described as a fever dream written by someone who learned HTML from a fortune cookie. An H1 here, an H4 there, maybe an H2 if you're lucky - it's like someone threw heading tags at a wall and said "close enough."

Here's the thing nobody wants to admit at web dev happy hours: screen reader users rely on heading structure the way sighted users rely on... well, sight. They navigate by jumping between headings like you jump between chapters in a book. Except your book's chapters are titled like a broken vending machine. "Large Snack," "Salty Thing," "Other Item" - no order, no sense, no mercy.

According to published research, roughly 15-20% of web users rely on assistive technologies at some point. That's not a niche audience you can afford to ignore - that's your entire customer base's less-annoyed cousin asking you to get it together.

When Your H1 Goes Missing (Or There's Five of Them)

The H1 is supposed to be the headline of your page - the main character in your story. Except many websites treat it like the friend who shows up to the party unannounced: sometimes they don't come at all, sometimes they show up three times and nobody knows why, and sometimes they're wandering around telling jokes nobody asked for.

Missing H1s are basically your website saying "Surprise! This page has no topic!" Congratulations, you've created digital chaos. Screen readers are now standing outside your content like confused dinner guests wondering if they're at the right house.

And the multiple H1 situation? That's the web development equivalent of having two captains on a ship. Sure, it looks like leadership, but everyone's going in different directions and someone's definitely going overboard.

Best practice is simple: one H1 per page, clearly defining the page's main topic. Wild concept, I know.

Skipped Heading Levels: The Staircase That Goes Up By Threes

Here's where things get genuinely confusing: jumping from H1 straight to H4. Or from H2 to H5. It's like taking a staircase where the third step leads directly to the seventh floor. Your ankles hurt just thinking about it.

Screen reader users depend on heading hierarchy to understand content structure. When you skip levels, you're basically saying "I know what a logical progression is, but have you considered: chaos?" The assistive technology gets confused, the user gets frustrated, and somewhere a web accessibility specialist is stress-eating pretzels.

The proper hierarchy goes H1, then H2, then H3, and so on. Not because we're boring or love rules, but because accessibility isn't a suggestion - it's how some people actually use the internet.

Decorative Headings: Screen Reader Candy Corn

You know what's worse than no heading? A fake heading. A heading that looks fancy but doesn't actually lead anywhere. It's the content equivalent of a decorative candle that smells like nothing.

Some developers style random text as headings because it looks nice. "Brand statement," "tagline," "sassy subtitle" - wrapped in heading tags purely for visual effect. Screen reader users encounter these and think "Wait, is this important information?" The answer is no, but there's no way for them to know without navigating into it.

If something isn't structurally a heading, don't tag it as one. Use regular paragraphs, divs, or spans styled however you want. Save the actual heading tags for actual content divisions.

How to Actually Fix This (The Helpful Part)

Good news: fixing your heading structure is embarrassingly easy, which is probably why so many sites skip it.

• Start with one H1: Make it your page's main topic. Just one. Show some restraint.
• Follow the hierarchy: H2s break down the main topic, H3s support the H2s. Progressive disclosure of information, like a normal person wrote it.
• Never skip levels: No jumping from H2 to H4 unless you enjoy confusing humans and machines equally.
• Use real headings for structure: If something is just pretty, style it as a paragraph. It's not a betrayal of design; it's called respecting reality.
• Test with a screen reader: Navigate your site using actual assistive technology. See how it feels. Spoiler: if you hate it, so does everyone else.

The Bottom Line

Your heading structure should be as obvious to a screen reader as it is to your eyes. Not because you're legally required to care, but because accessibility is just... good design. It's writing like someone else might read it. It's building like someone else might use it differently than you do.

So go ahead - audit your site's headings today. Use the browser inspector, run it through an accessibility checker, or just read your heading structure out loud and ask yourself: "Does this make sense?" If the answer is anything less than enthusiastic, you've got work to do.

Your screen reader users are waiting. They've been patient. Don't make them keep waiting.

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.