Open almost any page that has been through a page builder and look at its headings in order. You’ll often find an H4 as the hero text, three H1s further down, and footer labels set as H2 because that size looked right. Visually the page is fine. Underneath, the outline makes no sense. It’s one of the problems I mention in my guide to ADA and WCAG, and it deserves a closer look.
What headings are actually for
A heading is a label for a section of content, and its level says where that section sits in the page’s hierarchy. The H1 names the page, H2s name the main sections, and H3s name the parts inside an H2. Sighted visitors read that structure from size and weight. Screen readers and other assistive technology read it from the tags.
People who use a screen reader can pull up a list of all the headings on a page and jump straight to one, much like a table of contents. WebAIM’s screen reader user surveys have consistently shown headings as the most common way people look for information on a long page. If the levels follow font size instead of structure, that list is misleading, and the page takes much longer to move around.
How it goes wrong
Page builders make the level a styling choice. The text looks too big, so you pick a smaller tag. The footer label needs to stand out, so it becomes an H2. These are the patterns I see most often:
- The hero is not the H1. The main headline is an H4 or H5, and the real H1 is hidden or missing.
- Several H1s. Every large heading is set as an H1 because it looks like one.
- Skipped levels. An H2 is followed by an H4 because the H3 style looked too small.
- Footer and sidebar labels as headings. Many themes output widget titles as H2 or H3, so “Quick links” ranks level with your main page sections.
- Headings used for emphasis. Pull quotes, taglines and whole sentences are wrapped in heading tags so they look bold.
Here is how that can look as an outline, next to what it should be:
✗ Chosen for size
H4 We build websites that work
H1 Our services
H4 Design
H4 Maintenance
H2 Quick links
H2 Contact✓ Chosen for structure
H1 We build websites that work
H2 Our services
H3 Design
H3 Maintenance
H2 Why clients stay
(footer labels are plain text)What WCAG says, and what it doesn’t
Two WCAG success criteria apply. 1.3.1 Info and Relationships (Level A) says structure that is shown visually must also be available in the code, so a heading that looks like a heading should be marked up as one, and text that isn’t a heading shouldn’t be. 2.4.6 Headings and Labels (Level AA) says headings should describe the topic or purpose of their section.
WCAG doesn’t say you must have exactly one H1 or that you can never skip a level. Even so, a logical order is the accepted practice, and tools like WAVE, axe and Lighthouse flag skipped levels and missing H1s because they signal a structure that wasn’t planned. Search engines also use headings to understand what each section covers. Google has said it doesn’t need a strict order, but clear headings help it and your readers.
How to check your own pages
- Run my free website checker on your homepage. It reports a missing or duplicate H1 and skipped heading levels.
- Open the Structure view in the WAVE extension, or use a headings outline extension, and read only the headings from top to bottom.
- Ask yourself whether that list works as a table of contents. If you couldn’t tell what the page is about from it, the levels or the wording need work.
How to fix it
The rule is simple: choose the level for the structure and set the size with CSS. Page builders already separate the two. In Elementor’s Heading widget the level is the HTML Tag setting, and in WordPress’s Heading block it’s the level selector in the toolbar. The size comes from the typography controls, so you can have a small H2 or a large H3 without changing the structure.
- One H1 per page, naming the page’s main topic. Make it the visible hero headline.
- H2 for main sections, H3 inside them, and don’t skip a level when going deeper.
- Text that isn’t a section label, such as footer titles, card taglines and pull quotes, should be a paragraph styled with a class, not a heading.
- Write headings that make sense on their own, because people hear them out of context in a list.
- Check again after a redesign or when several people edit the site. This is where it usually creeps back in.
I build my own sites this way. On this one, every page has a single H1, the sections follow in order, and the footer labels are plain text, not headings.
If you’d like your site’s headings and the other common WCAG issues checked, I can start with an audit. See my ADA and accessibility compliance service, or get in touch for a free consultation.
