Use real headings, not bold paragraphs p-as-heading

Who it affects

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

<style>body{font-family:Georgia,serif;margin:0;padding:16px;line-height:1.45;font-size:15px}p{margin:0 0 6px}.title{font-weight:700;font-size:17px;margin-top:8px}</style>
<p class="title">Planning applications</p>
<p>Two applications were received this month, both for single-storey rear extensions on Mill Lane.</p>
<p class="title">Road closures</p>
<p>Church Street closes for resurfacing from 3 to 7 November.</p>

<style>body{font-family:Georgia,serif;margin:0;padding:16px;line-height:1.45;font-size:15px}p{margin:0 0 6px}h2{font-weight:700;font-size:17px;margin:8px 0 2px}</style>
<h2>Planning applications</h2>
<p>Two applications were received this month, both for single-storey rear extensions on Mill Lane.</p>
<h2>Road closures</h2>
<p>Church Street closes for resurfacing from 3 to 7 November.</p>

Test it by hand in two minutes

1. Open the heading list: the VoiceOver rotor (Ctrl+Option+U), NVDA's elements list (Insert+F7), or the HeadingsMap browser extension. Every visible section title should be in it.
2. Find a section title on screen that is missing from the list. Right click it and choose Inspect. If it is a p, b, strong, span or div, it is a fake heading.
3. Check the levels make sense once fixed: the page title is h1, sections h2, subsections h3.

The fix

<p><strong>Planning applications</strong></p>
<p>Two applications were received this month.</p>

<h2>Planning applications</h2>
<p>Two applications were received this month.</p>

Pick the level from its place in the outline, not from the size you want. Size and weight belong in the CSS for h2.

Heading styled with a class on a div

<div class="section-title">Road closures</div>

<h2 class="section-title">Road closures</h2>

Keep the class so the styling does not change.

Keeping the old look

p.title { font-weight: 700; font-size: 17px; margin-top: 8px; }

h2 { font-weight: 700; font-size: 17px; margin: 8px 0 2px; }

If the bold paragraph was the house style, give the h2 the same CSS. Nobody sighted will notice the change.

A bold lead-in that is not a heading

<h3>Note:</h3>
<p>the office is closed on Friday.</p>

<p><strong>Note:</strong> the office is closed on Friday.</p>

Not every bold phrase is a heading. A lead-in word that starts a sentence stays in the paragraph.

Common mistakes

• Choosing a heading level for its default size, then jumping from h2 to h4 to get the look you want.
• Adding role="heading" to the paragraph without aria-level, or instead of using the real element.
• Turning every bold phrase into a heading, including labels and warnings inside paragraphs.
• Wrapping the section title in a link or button with no heading element inside it.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is a check (not run by Websight) for:

• 1.3.1 Info and Relationships (level A). Official W3C text.

Related rules