Screen Reader Users Navigate by Headings and Yours Are a Mess

You know that feeling when you're at someone's house and they reorganize their kitchen, so you open what you think is the silverware drawer and it's full of Christmas decorations? That's what your website's heading structure feels like to someone using a screen reader. Except worse, because at least you can see the Christmas decorations. They just get told there's a drawer, and then - SURPRISE - psychological damage.

Here's the thing nobody tells you at web development conferences (probably because they're too busy talking about cryptocurrency or whatever): screen reader users don't scroll through your site like a person with eyeballs. They navigate it like it's a table of contents. They jump from heading to heading, assuming you've actually bothered to create a logical, hierarchical structure. And if you haven't? Well, congratulations. You've just turned your website into a choose-your-own-adventure book written by someone having a stroke.

The H1 Problem: It's Missing and Nobody Told You

Let's start with the most criminally obvious one: the missing H1. Industry data suggests that roughly 47% of websites don't have a proper H1 tag, or they have multiple H1s like some kind of heading anarchy situation. It's the web development equivalent of a book with no title. Or 47 titles. Both are bad.

Your H1 should be singular, clear, and actually descriptive. Not "Welcome" (we're already here, thanks for the reminder). Not some vague corporate word salad like "Synergistic Solutions for Tomorrow's Paradigms." Just tell people what your page is about. Revolutionary, I know.

When a screen reader user lands on your page, they often immediately ask "what is this?" The H1 is their answer. If you don't have one, they're basically talking to a mime. And mimes are creepy.

Skipped Heading Levels: The HTML Equivalent of Stairs That Skip a Step

This is where things get genuinely weird. Developers skip heading levels all the time, and I'm convinced it's because they learned that H2s are "too big" and H4s are "too small," so obviously you go H1, then H4, then H6. Logical. Sensible. Completely insane.

Here's what actually happens: Screen readers announce heading levels. So when someone's using a screen reader and suddenly jumps from H1 directly to H4, their brain does a record scratch. "Wait, where did H2 and H3 go? Did I miss something? Am I having a stroke?" (Narrator: They were not having a stroke. You were just bad at HTML.)

The hierarchy should work like this:

1. H1 - The main page title (singular, please)
2. H2 - Major sections
3. H3 - Subsections under H2s
4. H4+ - Only if you're genuinely deep in the weeds

Think of it as an outline. A real one. The kind you learned about in school and immediately forgot because you just started writing and hoped it worked out. Don't do that here.

Decorative Headings: When You Use Heading Tags for Fashion

And then there's the absolutely feral practice of using heading tags purely for styling. You know the culprit - that line of text that's big and bold and you styled it as an H3 because "H3s are this size in our design system." Except it's not actually a heading. It's decorative. It's a heading's costume.

Screen reader users read it as a structural heading anyway, which is like getting given a map where half the roads don't actually exist. You just go to a dead end labeled "Our Team" and there's literally nothing there. Just vibes. The heading said there would be content, but there isn't. It's a lie. Your headings are lying to disabled users.

If something is purely decorative, don't use a heading tag. Use a `