How to Structure Headings for Accessibility and Clear Content

Headings are a navigation system, not decoration

Visual readers use headings to predict what a page contains and decide where to read. Screen reader users can call up a list of headings or move from one heading to the next. People with attention, memory, language, or reading difficulties also benefit when long content is divided into named, manageable sections.

A heading that only looks large helps someone who sees the page, but software may still treat it as an ordinary paragraph. Conversely, a real heading can be styled to any appropriate visual size while retaining its programmatic role. Semantic structure preserves the same relationships when presentation changes.

What WCAG actually requires

Two WCAG success criteria are especially relevant. At Level A, Success Criterion 1.3.1 requires information, structure, and relationships conveyed through presentation to be programmatically determinable or available in text. At Level AA, Success Criterion 2.4.6 requires headings and labels, when provided, to describe their topic or purpose.

WCAG 2.2 also includes Success Criterion 2.4.10, Section Headings, at Level AAA. It requires headings to organize content, with an exception where headings are not applicable. Even when AAA is not the target, breaking substantial content into descriptive sections is a valuable usability practice.

Think in nested sections

Heading levels express relationships. An H2 begins a major section of the H1 topic. An H3 is a subsection of the current H2. An H4 belongs inside the current H3. If the next topic has the same importance as the preceding H2, return to H2 rather than continuing downward.

Read the outline without its paragraphs. If the sequence still tells a coherent story, the hierarchy is probably useful. If an H3 appears before any relevant H2, or a topic seems nested under the wrong parent, revise the structure rather than hiding the issue with CSS.

Use the H1 to identify the page’s main topic

For ordinary articles and tool pages, one visible, descriptive H1 is a simple and dependable convention. It gives readers a clear starting point and avoids uncertainty about which title represents the primary content. The H1 should align with the page’s actual purpose, but it does not need to match the HTML title element word for word.

Multiple H1 elements are allowed by HTML, and their mere presence is not automatically a WCAG failure. However, repeated H1s created by templates, widgets, or authoring mistakes can flatten the perceived hierarchy and make a heading list harder to interpret. Use more than one only when the document model genuinely calls for it and the resulting outline remains clear.

Choose levels by meaning, never by appearance

Do not select H4 because its default font looks smaller than H2. Choose the semantic level first, then use CSS or theme controls for appearance. Heading rank and visual size serve different purposes.

<p class="large-bold">
  Shipping options
</p>

<h2 class="section-title">
  Shipping options
</h2>

A common editing mistake is to start at H3 because the theme’s H2 is visually too large. This creates a structural problem to compensate for a design problem. Adjust the theme style instead. The reverse mistake—using headings to enlarge an isolated sentence, price, testimonial, or callout—adds false destinations to the heading list.

What about skipped levels?

Moving from H2 to H4 suggests that a level of grouping may be missing. It is normally clearer to move one level at a time, especially when descending into subsections. Returning upward can legitimately skip levels: after the end of an H4 subsection, the next major section may be H2. Evaluate the relationship, not just the numeric sequence.

Write headings that work outside visual context

A user navigating a heading list may hear the headings without nearby paragraphs, images, or layout. Each heading should therefore provide a useful cue about the content that follows. It can be short, but it should not be empty, misleading, or dependent on vague language.

Avoid stuffing headings with repetitive search phrases. A heading should help a human decide whether to read the section. Google’s people-first content guidance similarly recommends that the main heading provide a descriptive, helpful summary rather than exaggeration or shock.

Audit the page WordPress actually publishes

The editor shows only part of the final document. A theme may render the page title as H1, a navigation widget may add headings, a related-posts block may introduce H2 elements, and reusable patterns may contain their own levels. The published DOM—not the block label in the editor—is what browsers and assistive technologies receive.

1. Preview or publish the page.Use the final template, including the header, sidebar, related content, and footer.
2. Collect headings in document order.Run the DOFIW Heading Structure Checker on the rendered HTML or inspect the page with browser accessibility tools.
3. Find the primary content heading.Confirm that the page title is present and that an author-added H1 has not duplicated it.
4. Read only the outline.Check whether each subsection clearly belongs to the heading above it.
5. Review surrounding template regions.Navigation, widgets, popups, footers, and recommendations can create unexpected headings.
6. Test with assistive technology.Automated output flags patterns; it cannot decide whether wording accurately describes a topic.

Handle repeated cards, accordions, and sidebars by hierarchy

Component names do not determine heading levels. A card title may be an H3 when the card group is introduced by an H2, but the same card could use H2 when it is a top-level section. A heading inside a reusable component must fit the page where that component appears.

Modal dialogs, navigation landmarks, and complementary regions may have their own labels and headings. Document order still matters. Avoid inserting hidden empty headings to “balance” the numbers; they create silent or blank navigation stops without adding structure.

Heading accessibility and search visibility overlap—but are not identical

Semantic HTML helps machines understand page content, and Google advises developers to use semantic HTML. Clear headings also make people-first content easier to scan. These are good reasons to build a meaningful outline.

However, heading order is not a shortcut to rankings, and adding keywords to every H2 does not turn thin content into useful content. A page still needs original information, accurate examples, a satisfying answer, and trustworthy sourcing. Choose headings for the reader’s questions and the document’s hierarchy; search systems can then interpret the same clear structure.

What a heading checker can—and cannot—tell you

An automated checker can inventory H1–H6 elements, display their document order, identify empty headings, and warn about suspicious level changes. That makes hidden template problems visible and gives reviewers a fast outline.

The tool processes the supplied HTML locally in the browser; the content is not uploaded to a server. A clean report is not a certification of WCAG conformance. Review the rendered page, include theme content, and test representative navigation with a screen reader.

Common heading mistakes and direct fixes

• Styled paragraph: replace the visual-only title with the appropriate H1–H6 element and keep appearance in CSS.
• Heading used for size: return the text to a paragraph or other correct element and apply a visual class.
• Duplicate page title: keep the theme-generated H1 and start article sections at H2.
• Downward level skip: decide whether a parent section is missing or whether the child should use the next level.
• Empty heading: remove it or supply descriptive visible text; do not use headings as spacing blocks.
• Vague repeated wording: rewrite each heading so it identifies the specific section independently.
• Component-fixed rank: allow reusable cards or panels to receive the level appropriate to their page context.
• Visual order mismatch: align DOM order, heading hierarchy, and visible reading order.
• Over-fragmentation: combine tiny sections when headings interrupt rather than improve comprehension.
• Audit limited to the editor: inspect the complete published page with its template and widgets.

Heading structure checklist

Continue the DOFIW content-structure workflow

Frequently asked questions