Headings in the Order They Appear

How headings actually get used

Screen readers can produce a list of every heading on a page, and moving between them is the normal way somebody navigates a long page.

That list is the first thing many people encounter, before reading any of the content.

So your headings are not decoration or emphasis; they are the summary somebody uses to decide what to read.

Which makes the useful test reading them alone, in order, and asking whether they describe the page.

The test

• List your headings in order.
• Read them with nothing else.
• Ask whether they summarise the page.
• Note any that mean nothing alone.
• Note any that are out of sequence.

A browser extension will produce the list in seconds, and copying the headings into a document by hand works just as well. Reading them aloud is what reveals the problems.

What a broken list sounds like

Since the failures are recognisable once you have heard them.

Headings that say nothing alone: more, our approach, why us, and the ever-present learn more.

Headings that repeat: three sections all called services.

Headings that are really sentences from the middle of a paragraph, styled large.

And a jump from a main heading straight to a third-level one, which sounds like a missing section to anybody following the structure.

Each of those turns the table of contents into something that has to be ignored.

A worked example

A business listed the headings on their main service page and read them aloud.

The list was: services, why choose us, our approach, more information, get in touch.

Nothing in it said what the service was, where it was offered, what it cost, or how long it took, which were the four things every customer wanted.

They rewrote them as: cedar shingle roof replacement, what it costs, how long it takes, the areas we cover, and how to arrange a quote.

The page content barely changed and the headings became a usable summary.

Search traffic to the page rose as well, which was not the reason for doing it.

Levels are a sequence, not a size

Which is the structural half of this.

One main heading names the page, second-level headings are its sections, and third-level headings are subsections within them.

Skipping from the first to the third implies a missing level, which somebody navigating by structure notices immediately.

The usual cause is choosing a heading by how large it looks rather than where it sits, which is a styling decision leaking into structure.

Fix it by choosing the level for its position and adjusting the appearance separately, which is a few lines of styling and a permanent solution.

Do not skip a level to get a smaller heading.

One main heading per page

A small rule with a practical purpose.

The top-level heading names the page, and having several makes the list of headings read like several documents joined together.

The most common cause is a template putting the business name in a top-level heading in the header, so every page has one before its actual title.

That is worth checking once in the template, since it affects every page at once.

The page title should be the main heading, and the business name belongs in the header as ordinary text or as part of the logo link.

Write them as answers

Which is what makes the summary useful rather than merely correct.

A heading saying what it costs is more useful than pricing, and how long it takes beats timescales.

Somebody scanning the list is looking for their question, so phrasing headings the way the question would be asked is what gets found.

That helps sighted visitors scanning the page, helps search, and helps anybody navigating by structure, which is the pattern throughout this subject.

It is also easier to write, since you already know what people ask.

Check the long pages first

Since that is where navigation by heading matters.

A short page is read start to finish and its headings barely matter.

A long service page, a guide, or an article is where somebody will use the heading list rather than listening to everything.

Do those three or four pages properly and leave the rest.

That is twenty minutes rather than a site-wide project, and it covers where the benefit actually is.

The short pages will look after themselves, since two headings in the wrong order on a page somebody reads straight through costs nothing.

The same list is your page outline

Which is why this exercise pays beyond accessibility.

A page whose headings do not summarise it is usually a page that was never outlined, and the heading problem is a symptom of that rather than the cause.

Writing the headings first, as the answers a customer wants, and then filling in underneath is a faster way to produce a page than writing prose and adding headings afterwards.

Every page written that way passes this test automatically, which is the cheapest possible fix.

It also tends to produce shorter pages, since a section with nothing to say under it becomes obvious before it gets written.

The counter-case

Heading structure is easy to over-engineer.

A short page with two sections does not need a carefully nested hierarchy, and worrying about levels on it is effort with no return.

Some page builders also generate levels you cannot control, which limits what is achievable without rebuilding.

And a heading list that reads slightly oddly is a considerably smaller problem than a form nobody can complete.

Do the form first, then come back to this when there is time.

List the headings on your three longest pages, read them aloud, and rewrite any that say nothing alone.

The twenty minutes

1. Pick your three longest pages.
2. List the headings in order.
3. Read them aloud.
4. Rewrite any that say nothing alone.
5. Check no level is skipped.
6. Check for one main heading.
7. Phrase them as answers.

Step three is what finds the problems, since a list of headings that looks reasonable on screen frequently sounds like nothing at all when read aloud in sequence.

Why the levels get chosen wrongly is covered in headings used for size rather than structure.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.