Headings are the outline of a page, and screen reader users and search engines both read them that way. Choose each level for the page's structure, then style it to look however the design needs.

Chosen by size

Somebody editing a page wants a heading above a new section. They try heading 2, decide it looks too big, and settle on heading 4 because the size seems right.

Further down, a heading is needed in a hurry, so they type the words, make them bold, and move on. It looks like a heading. It is not one.

The footer gains three heading 2s labelled Contact, Hours and Follow us, because the theme styled them nicely.

On screen, the page looks fine. Underneath, its outline makes no sense.

What headings are for

Headings mark the structure of a page. The main heading names the page; second-level headings name its sections; third-level headings divide those sections further.

The levels describe relationships, not sizes. A heading 3 sits inside the heading 2 above it, the way a subsection sits inside a chapter.

How each level looks is a separate decision, made in the site's stylesheet. A heading can be any size, colour or weight without changing its level.

The usual ways headings go wrong

The second is the usual culprit on pages edited by staff over the years. Bold is the quickest way to make text look like a heading, and to a screen reader it is just another paragraph.

How screen reader users read a page

A screen reader speaks a page aloud for people who cannot see it. Listening to every word from the top is slow, so many users jump from heading to heading instead, much as a sighted visitor skims.

Most screen readers can also list a page's headings, like a table of contents, and move straight to any of them.

That list is only as good as the headings. Bold paragraphs do not appear in it. Skipped levels suggest sections that are missing. Slogans set as headings clutter it with things that are not sections at all.

WCAG 2.1, the current accessibility guidelines, asks for exactly this: structure shown visually must also exist in the code, and headings must describe the content beneath them.

What search engines read

Search engines treat headings as a page's outline too. A clear heading tells them what each section is about, which helps them match the section to the searches it answers.

A heading that says Welcome, or Our story, says nothing about the services beneath it. A heading that says emergency furnace repair in Coquitlam says a great deal.

None of this is a reason to stuff headings with search terms. Headings written for readers, describing what follows, are the ones search engines understand best anyway.

A worked example

A community music school with a dozen teachers had a lessons page that had been edited by several office staff over five years.

Each instrument was a bold paragraph. The fees section used a heading 5, because it matched the sidebar. A heading 2 near the top held a slogan about the joy of music.

A parent who uses a screen reader mentioned that the page was hard to follow. The heading list offered the slogan, the sidebar labels and Fees, and none of the instruments.

The fix started on paper. The page's outline was written as a list: lessons as the main heading, each instrument as a heading 2, and fees, teachers and times as heading 3s beneath each.

Then the levels were applied and the styles adjusted to match the design. The page looked almost the same. Its outline finally said what the page contained.

Structure first, styling second

The order of decisions is what prevents the problem.

Write the outline of a page before designing it: main heading, sections, subsections. Then decide how each level should look, once, for the whole site.

When a heading needs to look different in one place, change its style, not its level. Page builders usually allow this directly, with a setting for the heading's level kept separate from its size.

In the WordPress block editor, the heading block's level setting chooses structure. Whoever maintains the site can add a style for headings that need to look smaller or larger.

One main heading per page

The main heading should name the page: Lessons, Kitchen renovations, Contact. It is usually the same as, or close to, the title shown in search results.

Some themes make the business name or logo the main heading of every page, which leaves each page's real title as a second-level heading.

One main heading that names the page, with the business name elsewhere, gives the clearest outline. Whoever maintains the theme can change it once for the whole site.

Checking your own pages

Free browser extensions can list a page's headings as an outline. Read the list on its own, without the page, and ask whether it works as a table of contents.

On an iPhone, VoiceOver's rotor can be set to headings, and swiping down then moves from one heading to the next. Ten minutes of that on your own home page is instructive.

Anything bold that should be a heading, any level that skips, and any heading that is really a slogan will show up quickly.

The counter-case

A skipped level is a smaller fault than a missing heading. A page with real headings at slightly irregular levels is far easier to use than one built from bold paragraphs.

A very short page may need only its main heading, and that is fine.

And nobody needs to rework every page this week. Templates, footers and sidebars repeat on every page, so fixing those first does the most good for the least work.

Decide each heading's level by the structure of the page, then make it look however the design requires.

Page by page

  1. List the headings on your main pages.
  2. Read the list as a table of contents.
  3. Turn bold paragraphs into real headings.
  4. Fix skipped levels and emphasis headings.
  5. Demote sidebar and footer labels to lower levels.
  6. Give each page one main heading.
  7. Restyle a heading rather than change its level.

Step seven is the one that keeps it fixed. Every future edit will face the same temptation to pick a level for its size, and a style that can be applied instead removes the reason to.

Another barrier for people who do not use a mouse is described in keyboard traps in pop-ups and chat windows.

Frequently asked questions

Why does the heading level matter?

Because screen readers and search engines read the levels as the page's outline. A heading 4 chosen for its size tells them the section is a minor subsection.

Is bold text the same as a heading?

No. Bold text looks like a heading but is marked as an ordinary paragraph, so it does not appear in a screen reader's list of headings.

How do screen reader users use headings?

Many jump from heading to heading rather than listening to every word, or open a list of headings and go straight to the section they want.

Does skipping heading levels matter?

It suggests sections are missing and makes the outline harder to follow. It is a smaller fault than bold paragraphs or no headings, but worth fixing.

What if a heading looks too big?

Change its style, not its level. Most page builders set a heading's level and size separately, and in the WordPress block editor a style added to the site does the same.

What does WCAG 2.1 say about headings?

Structure shown visually must also exist in the code, so headings must be marked as headings, and they should describe the content beneath them.

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.

Headings chosen by how they look?

List the headings on your main pages. We will show which ones need a different level, and how to restyle them.

Start a Conversation