Sonoma State University

Get IT Help

Siteimprove - How to fix "Empty Headings"

Siteimprove Issue:

Empty Headings
This page contains one or more "empty" headings (heading tags with no text content).

Screenshot of Siteimprove page report indicating empty heading after a series of button - click to zoom

This usually means there are HTML heading tags in the Body field that have no content  Here are some examples:

<h1> </h1>

<h2> </h2>

Why This Is Important

Headings help to break up content and make it easier for visitors to scan a page for information. They need to be set up correctly so that visitors using screen readers can use them in this way.

A heading is considered "empty" if there is no text for a screen reader to relay to the user. Image headings are considered empty if no text alternative is available.

Where Empty Headings Come From

These empty headings might be due to:

  • The content owner added a heading to add more whitespace between elements on the page.
  • The content owner copied and pasted an empty heading from an original document.
  • The content owner deleted the contents of a heading, but didn't delete the heading tags.

How to Fix the Issue in Drupal

  1. Login to your Drupal site.
  2. Go to the page with the issue.
  3. Make a new draft.
  4. In the HTML editor, click in the area that has the empty heading - the Siteimprove page report shows you which parts of the content have empty headings.
  5. Click the Paragraph Format button (it will show the heading level), and then select Normal. This converts the heading to a paragraph (<p>) and will keep a little white space, but won't cause Siteimprove to flag the page.
    TIP: Don't select Normal (DIV).
  6. Repeat steps 4 and 5 for each area with an empty heading.
  7. Save and publish.

How to Avoid This Issue

When copying and pasting content into the HTML editor, do a quick review for any extra space between paragraphs, after tables, or at the end of the content.  Click your cursor into any suspicious spaces, and check the Paragraph Format button (top left of HTML editor) and Tag Selector area (bottom right of HTML editor.  These will indicate the HTML tag being used.  Adjust any empty headings before saving and publishing.