Turn on a screen reader, open one of your service pages and ask for the list of headings. On a page with good heading structure you get something like a table of contents: the page title, then “What we offer”, “Pricing questions”, “How to book”. On many business sites you get “Welcome!”, “Call us today”, “Lorem”, three headings that just say “Learn more”, and the real section titles nowhere, because they were typed as bold text.
That list is how a lot of screen reader users read a page. They do not start at the top and listen to everything; they jump from heading to heading until they find the part they want. If the headings are wrong, the page is effectively unlabeled. This post is about getting headings right for those readers, which happens to make the page clearer for everyone else as well.
How people actually use headings
Screen readers such as NVDA, JAWS and VoiceOver let users press a single key (often H) to jump to the next heading, or a number key to jump to the next heading of a particular level. They can also pull up a list of every heading on the page and pick one. That makes headings the main shortcut through a long page.
Sighted readers rely on them too. People skimming a long page on a phone look for the large bold lines. Someone with a cognitive disability or low concentration uses them to work out where they are. And browser extensions that build an outline, or reading modes that reformat a page, all lean on heading markup.
The key word is markup. A heading only works as a shortcut when it is coded as a heading element (h1 to h6). Text that is merely large and bold looks like a heading and is invisible to all of these tools.
What WCAG asks about headings
Two success criteria cover most of this.
- 1.3.1 Info and Relationships (Level A). If something looks like a heading, it should be marked up as one, so the structure people see is also available to assistive technology. Bold paragraphs pretending to be headings fail here, and so do heading tags used on text that is not really a heading.
- 2.4.6 Headings and Labels (Level AA). Headings that exist should describe the topic or purpose of their section. “More info” repeated four times does not.
What WCAG does not do is lay down an exact numbering rule. Having exactly one H1, and never jumping from H2 straight to H4, are widely recommended practices rather than named criteria. We recommend both anyway, because a tidy outline is far easier to move through, and auditors and screen reader users alike will notice a messy one.
Getting your heading structure right
One H1 that names the page
The H1 should say what this page is: “Family Dentistry in Plain Terms”, “Winter Menu”, “Contact Us”. In WordPress the theme usually turns the page or post title into the H1. Problems start when the theme does that and an editor also types a second H1 into the content, or when a page builder layout hides the theme title and nobody adds one back, leaving a page with no H1 at all.
Levels that follow the outline
Think of the page as a document outline. Main sections are H2. Subsections inside a section are H3. You go one level deeper only when you are inside something. Going back up is always fine: after an H4 you can start a new H2 section.
A simple way to check: if you read only the headings, indented by level, does it make sense as a contents list? If an H3 seems to belong to the wrong H2, the structure is off.
Headings that describe, not decorate
“Why choose us” tells a visitor almost nothing. “Same-week appointments and Saturday hours” tells them something. Clever or vague headings are a writing habit, and fixing them helps every reader.
Headings used for styling, and the reverse
On business sites this is where headings most often go wrong, and it runs both ways.
Heading tags chosen for their size
An editor wants a small gray line above a section, so they pick H5 because it looks right. A designer wants a big promotional line in a banner, so it becomes an H2 even though it is a slogan. Now the outline contains “Trusted since forever” as a main section and the real section headings are a level below it.
The fix is to separate looks from meaning. Pick the level that fits the outline, then change the size through the theme’s typography settings or a CSS class. Paragraph text can be made large without becoming a heading.
Bold text pretending to be a heading
The reverse problem: a section title typed as a bold paragraph because the real heading style was “too big”. It looks like a heading and does nothing as one. In the block editor, converting it to a Heading block and picking the right level takes seconds.
Theme and widget headings
Sidebar widget titles, footer column titles and “Related posts” labels are often marked up as headings by the theme. That is reasonable, but on some themes they come out as H2 or even H1 and sit ahead of the main content in the outline. If the footer contributes six H2 headings to every page, a screen reader user’s heading list is half footer.
Page builders and heading levels
Page builders make it very easy to produce a messy heading structure, because each widget has its own heading setting and the default is not always sensible.
- Heading widgets default to one level. Many builders set new Heading widgets to H2 out of the box. Copy that widget ten times down a page and every line becomes a main section, including the little labels above buttons.
- Card and icon box titles. Service cards, team member boxes and testimonial blocks each output a title as a heading. Three cards with H5 titles inside an H2 section, with no H3 or H4 in between, is a common result.
- Tabs and accordions. Titles of tabs and accordion panels may or may not be headings, depending on the widget. Check what your builder outputs rather than assuming.
- Templates and global sections. A header template that marks the site name as H1 gives every page two H1s once the page title is added too.
Most builders let you choose the HTML tag of a heading separately from its style; the setting is usually near the typography controls. Our notes on Elementor’s heading and widget output go into that builder specifically. If you build in the core editor instead, see accessible content in the block editor.
How to check heading levels in a few minutes
- Run the free WAVE extension on the page and open its Structure or Outline view. It lists every heading with its level, indented, in page order. Our guide to using WAVE on a page explains where that view is.
- Read the list top to bottom. Is there one H1, and does it name the page? Do the H2s match the sections you can see?
- Look for gaps: an H2 followed straight by an H4, or H5s floating with nothing above them.
- Look for impostors: slogans, button labels or “Learn more” marked as headings.
- Scroll the page and look for anything that looks like a heading but did not appear in the list. That is bold text that needs converting.
- Repeat on each template: homepage, a page, a post, an archive, a product page. Headers and footers repeat, so a fix there fixes every page.
If you have a few more minutes, open a screen reader and press H through the page. Hearing the outline read aloud makes problems obvious in a way a list on screen does not.
This post is written for people using assistive technology. If you want the editorial side, how headings organize a page for skimmers and search engines, our existing guide on how headings shape content for readers and search covers it. Headings are also one item among the wider WCAG 2.2 AA picture, and if you are trying to understand what the whole job looks like, start with our ADA website accessibility help.
Frequently asked questions
Does a page need exactly one H1?
No WCAG rule says so. The standard asks that headings reflect the real structure and describe their sections, not that there is a set number of H1s. A single H1 that names the page is the clearest pattern for screen reader users, and it is what we recommend, but a second H1 is a usability problem rather than an automatic failure.
Can I skip from an H2 to an H4 if the H4 looks better?
Better not. Skipping a level makes the outline confusing, since a screen reader user may wonder what they missed. Choose the level that fits the structure, usually H3 here, and adjust its size with your theme settings or a CSS class. Level and appearance can be set separately.
Should sidebar and footer titles be headings?
Often yes, because they label real sections that people may want to jump to. Use a level that keeps them below the main content in importance, and make sure they do not outnumber the real section headings. A footer contributing several H2s to every page crowds the heading list.
Should my logo or site name be the H1?
Usually not on inner pages. The H1 should name the page someone is on, which in WordPress is normally the page or post title. Some themes mark the site name as the H1 on the home page only, which is fine. A logo works well as a home link with good alt text, without being a heading at all.
Our WCAG audit checks each template’s outline against 1.3.1 and 2.4.6, along with the rest of Level AA, and reports every heading issue with its location. Where a builder is the source, our page builder accessibility fixes correct the widgets and templates so new pages come out right.
Next in this series: Descriptive Link Text: Fixing Read More and Click Here
