Accessible headings

For many people, the morning starts with coffee and a newspaper, on paper or online. You scan the headlines, looking for the one that makes you want to read the smaller print.

Headings are the text between sections of a page, often larger and more prominent than the paragraphs.

They divide content into manageable sections or group related information. They give the reader a structure to follow by summarising what comes next.

Visual structure

Headings look different from ordinary text. They have their own styles, such as font, size, colour and weight. Different levels often use decreasing font sizes: the page title is largest, with each lower level a little smaller.

Technical structure

Headings are also important to the technical side of digital accessibility. They provide structure in the code as well as visually, provided they use semantic HTML correctly.

Think of the newspaper example again. People using screen readers use headings in much the same way. Keyboard commands let them jump between headings and quickly get an overview of the page.

Relevant WCAG success criteria

Headings are useful for websites and documents, but what do the guidelines say? Three WCAG success criteria are particularly relevant:

• 1.3.1 Info and Relationships (Level A)
• 2.4.6 Headings and Labels (Level AA)
• 2.4.10 Section Headings (Level AAA)

1.3.1 Info and Relationships

This criterion does not require headings on a page. It does require headings that are used to be marked up semantically.

For headings, use HTML elements h1 through h6, with h1 the highest level.

If existing HTML cannot be changed, ARIA offers another option: combine role="heading" with aria-level="".

A common mistake is to make headings bold using <b> or <strong>. This communicates structure visually but does not establish the technical relationship with the text. The reverse matters too: do not use headings as decoration.

2.4.6 Headings and Labels

This criterion does not require headings either. It asks whether the headings that are present describe their content meaningfully.

As with a newspaper, headings help readers get a quick overview. A heading should summarise the content that follows. A good heading is:

• Descriptive
• Brief enough to scan
• Clear

2.4.10 Section Headings

At WCAG’s highest level, AAA, criterion 2.4.10 requires headings to organise content into sections. This page is an example.

Meeting this requirement is not always possible, depending on the content and technical options. Deciding when text needs headings also involves judgement. This is why the criterion is at Level AAA.

A good heading structure helps everyone, so I recommend using headings wherever possible.

What is allowed, and what is not?

Semantic headings support accessibility. They provide visual and technical structure, helping people find important information quickly. But what do the rules allow, and what counts as a WCAG failure?

Are headings mandatory?

The Level A and AA criteria discussed above do not require headings to be present. At the conformance level used in Europe under EN 301 549 (PDF, version 3.2.1), there is no general requirement to add headings.

Criterion 2.4.6 requires existing headings to be meaningful. Criterion 1.3.1 requires the structure communicated by headings to be available programmatically.

One, none or several <h1> headings?

Structure is a major benefit of headings. As the highest level, <h1> is often used for the page title.

WCAG does not require a page title in this form. Criterion 2.4.2, Page Titled, requires a title through the <title> element.

HTML specifications do not require an h1 either. Multiple h1 elements are also permitted, although they can confuse visitors.

An example is an overview of several articles, each using an h1 for its title. The headings should not visually suggest different levels, because that would communicate a different structure.

The next section on heading order and skipped levels is relevant here too.

Heading order and skipped levels

Skipping heading levels is often debated. One objection is that it does not help create a well-structured page.

However, skipping a level is not necessarily a failure if the hierarchy remains correct.

<h2>Pannenkoek met spek</h2>
<p>Voor een goede pannenkoek met spek, is het belangrijk dat je […] </p>
<h4>Bereidingswijze</h4>
<ol>
    <li>Zeef 400 gram volkorenbloem boven een beslagkom […] </li>
</ol>

In this example, an H2 is followed by an H4. The relative hierarchy still fits: the preparation instructions belong within the section about bacon pancakes. This is not a WCAG failure.

WCAG’s Technique H42 refers to levels that are “appropriate” to the content, allowing interpretation. The working group deliberately took a practical, realistic approach. For example, loading external content can make an exact sequence difficult to maintain.

Conclusion

Headings are important for accessibility, but WCAG sets relatively few strict requirements, often for practical reasons.

During an assessment, distinguish between an unhelpful structure and a WCAG failure. Something can make a website harder to use without failing a criterion.

I still strongly recommend checking heading use and keeping a suitable hierarchy. I personally note these issues in reports so editors can consider whether the headings fit the content and whether the structure can be improved.