Did you ensure that items that aren’t technically headings don’t use heading tags?

Goal

Ensure that we don’t use headings incorrectly as visual style elements when they are meant to be used for hierarchical structure.

Why this matters

Headings provide users of assistive technology (AT) a quick way to understand what’s on the site and a quick way to get to that content. Because we want them to be hierarchically prominent in the visual display, they’re often bigger and/or bolder than standard body copy.

Some people make the mistake of thinking that they can make content more prominent by wrapping it in a heading tag. By misusing the headings, they confuse people using AT into thinking their “super important” content is a section header.

For example, let’s say a user is shopping for home insurance and the page content contains a title and four subheadings. The correct page hierarchy would look like:

1. Rely on Bob’s Insurance for Homeowner’s Insurance
   1. What’s covered by homeowner’s insurance?
   2. What’s not covered by homeowner’s insurance
   3. Property values
   4. Want to know more?

In the example above, the lettered subheadings would be <h2> level headings, and there would be content in each of the sections.

Now let’s say Bob at Bob’s Insurance wants to advertise that they have special rates. They should CSS and a class=”promotion” attribute (or similar) in the HTML to ensure that the information gets higher visual prominence without implying that it’s a new section of content.

If Bob instead marks up the promotion in an <h1> to make it big and bold, this is what the page hierarchy would look like:

1. Rely on Bob’s Insurance for Homeowner’s Insurance
   1. What’s covered by homeowner’s insurance?
2. Special rates good until July 31!
   1. What’s not covered by homeowner’s insurance
   2. Property values
   3. Want to know more?

This causes a couple of problems.

First, it repeats an <h1> when a page should only ever have one <h1>.

Second, it implies that “what’s not covered”, “property values” and “want to know more” are children of “special rates” – meaning these three <h2> elements don’t apply to “rely on Bob’s Insurance”.

Third, there is no actual content about the special rates on the page, so it’s a header with no content.

The result is confusing both visually and when used with AT.

How to implement

UX Designers

• If designing a callout or other content that doesn’t fit the definition of a heading, ensure that the implementing team understands that the callout is not a heading and shouldn’t be coded as one.

Developers

Ensure that only headings are wrapped in heading tags.

How to test

Manual testing

1. Right-click content that isn’t a heading and ensure it’s not tagged as a heading.

Automated testing

Automated testing can detect if headings are skipped or used in the wrong order, which may indicate that someone put a heading on the page where they should’ve used a class.

Automated testing can’t detect if a heading that’s semantically in the right place should have been a heading.