Heading text

Silktide checks that every heading on your pages contains readable text. An empty heading announces a section that isn't there, and often hides content that was meant to be a title.

In HTML, headings (<h1> through <h6>) outline the structure of a page. Empty ones usually appear when a CMS template renders a heading whose content was never filled in, or when a heading contains only an image with no alternative text.

<!-- Problem: a heading with nothing in it -->
<h2>   </h2>

<!-- Problem: the image has no alternative text, so the heading is silent -->
<h2><img src="press.png" alt=""></h2>

Why this matters

People using screen readers often skim a page by jumping from heading to heading. An empty heading is announced as "heading level 2" with nothing after it - a dead entry in the page outline that breaks the rhythm of navigation and leaves the listener wondering what they missed. When the heading contains an unlabelled image, sighted visitors see a title that assistive technology users never receive.

How to fix it

1. If the heading should have text, add it in your CMS or code.
2. If the heading contains an image that acts as the title, give the image alternative text:

<!-- Fixed: the image's alternative text becomes the heading text -->
<h2><img src="press.png" alt="Press releases"></h2>

3. If the heading serves no purpose - for example an empty template slot or a heading used only for spacing - remove the element entirely. Use CSS for spacing, not empty tags.

How Silktide tests this

1. Find every heading element (<h1> through <h6>) on each page.
2. Collect each heading's text, including the alternative text of any images inside it.
3. Report each heading whose content includes no letters or numbers - so headings containing only spaces or punctuation count as empty.

Learn more

• Understanding Success Criterion 1.3.1: Info and Relationships (WCAG 2.2)
• Technique H42: Using h1-h6 to identify headings (WCAG)
• Missing H1