Heading Structure: The Accessibility Fix Hidden in Plain Sight

Headings are not just big text

On a good page, headings create a map.

They tell visitors what the page is about, where sections begin, and how ideas relate to each other. Sighted visitors use that map visually. Screen reader users can also navigate by headings, jumping from section to section instead of listening to every word in order.

That only works when headings are real headings in the code.

Many pages look structured but are not. A designer makes text large and bold. A builder uses a paragraph block styled like a heading. A developer picks an H4 because the default H2 is too large. The visual result may look fine, but the underlying outline is confusing.

Heading structure is one of those accessibility issues that feels small until you try to navigate without the visual layout.

The page should have one clear main heading

Most pages should have one H1 that names the page.

The H1 does not need to be clever. It needs to identify the main topic. A service page, article, guide, product page, or landing page should tell both people and assistive technology what it is.

Problems appear when there is no H1, several competing H1s, or an H1 used only because it looks nice. Multiple H1s are not always catastrophic in modern HTML, but for most business pages they usually signal messy structure.

If the page has a hero headline, that headline is often the H1. If the logo is the H1 on every page, the site may be telling assistive technology that every page has the same topic.

Do not choose heading levels for font size

Heading levels describe structure, not style.

H2 sections sit under the H1. H3 subsections sit under an H2. H4 subsections sit under an H3. The numbers create a hierarchy.

A common mistake is choosing H4 because it looks smaller, even when the content is really a major section. Another is using H2 for every decorative callout because the design likes that style.

The fix is to separate semantics from appearance. Use the correct heading level for the outline, then style it with CSS. If the H2 is too large, change the H2 style in that component. Do not downgrade the heading just to get a smaller font.

Skipped levels confuse the outline

A skipped heading level happens when the page jumps from H1 to H3, or H2 to H4, without the level in between.

This can make the page outline feel like it has missing stairs. A screen reader user navigating by headings may wonder whether a section is nested under an invisible parent or whether the page structure was simply broken.

Not every skipped level creates the same amount of user pain, but repeated skipped levels across templates are a strong signal that the site is using headings for styling instead of structure.

Repair the template, not just the one page. If every card title is an H4 because that was the easiest style, update the component.

Visual-only headings do not count

Some pages use divs, spans, or paragraphs that look like headings. They may be bold, uppercase, centered, or large. Assistive technology still treats them as ordinary text.

This matters most on long pages. A visitor using heading navigation may hear only the H1 and miss all the visible section breaks.

If a line introduces a new section, make it a heading. If it is only a decorative label, it may not need heading markup. The question is whether the text helps organize the page.

The quick outline test

Strip the page down to only its headings.

The outline should read like a table of contents. You should be able to understand the page's structure without the paragraphs.

For example:

• H1: ADA Website Audit
• H2: What the scan checks
• H2: What the paid report includes
• H2: When a business should run an audit
• H3: Before a redesign
• H3: After a demand letter
• H2: Start with a free scan

That outline makes sense. It moves from page topic to major sections to subsections.

Now compare that to a page where every card title is an H2, every eyebrow label is an H5, and the footer has another H1. The visitor can still see the design, but the structural map is messy.

Why headings help more than accessibility

Good headings also help scanning, editing, SEO clarity, and conversion.

Visitors do not read every word first. They scan section headings to decide whether the page answers their question. Search engines use headings as one signal among many to understand topic coverage. Writers use headings to keep the argument organized.

Accessibility is not separate from those benefits. It is the disciplined version of the same structure.

If the page outline makes sense to a screen reader, it usually makes more sense to everyone.

How to repair heading issues

Start with the templates that generate many pages: blog layout, service page, product card grid, FAQ component, landing page sections, footer, and reusable content blocks.

Then apply four rules.

• Use one main H1 for the page topic.
• Use H2 for major page sections.
• Use H3 for subsections inside those H2 sections.
• Style headings with CSS instead of choosing levels for size.

After the change, rerun the scan and manually inspect the heading outline on key pages.

Heading structure is not glamorous. That is why it gets ignored. But it is one of the simplest ways to turn a page from visually arranged content into a usable document.