Why bold text ≠ heading

Over the past two weeks, I covered heading hierarchy basics and how to handle conflicts between visual design and semantic structure. Today, I want to talk about text that looks like a heading but isn’t actually marked up as one.

You see text on a page that looks like a heading. It’s bold, it’s bigger, it introduces a section. But when you inspect it, it’s just a paragraph tag with bold styling. Or worse, a div with custom CSS. To sighted users, it functions as a heading. To screen reader users, it doesn’t exist as a heading at all.

The bold text problem

Making text bold and large doesn’t make it a heading. Screen readers only recognize actual heading elements (H1 through H6). When you style regular text to look like a heading, you create a visual structure that screen reader users can’t access. They can’t navigate to it. They can’t use it to understand page organization. It’s invisible to them as a structural element.

Why do people do this?

Usually, it’s because the default heading styles don’t match the design, or because someone doesn’t know how to change heading styles. Sometimes it’s a CMS limitation where users can’t easily insert proper headings. But the solution is always to use real headings and style them with CSS, never to fake headings with bold text.

Other common heading mistakes

Bold text pretending to be a heading isn’t the only issue. Here are other mistakes that break heading structure.

• Using headings for styling only. Making text an H3 just because you want it to look a certain way, when it’s not actually a heading that introduces content.
• Empty headings. Heading elements with no text content serve no purpose and confuse screen reader users.
• Images as headings. If an image functions as a heading, it needs to be inside a heading element, not just styled to look prominent.
• Using heading levels inconsistently across pages. Your blog post pages should all follow the same heading structure.

How to check your headings

Use browser extensions like HeadingsMap to visualize your heading structure. Or navigate your page with a screen reader using heading mode. Pull up a list of all headings. Does it make sense as an outline? Can you understand the page structure from the headings alone?

Headings are fundamental to accessibility. They need proper hierarchy, semantic markup, and actual heading elements – not styled text pretending to be headings.