empty-heading

Headings should not be empty or have hidden text.

Description

If a heading element is used, ensure the presence of content and its accessibility

Why is it important?

Screen readers play a vital role in assisting users with accessing web content. They notify users about heading tags, but if a heading is empty or inaccessible, it can cause confusion or hinder users from understanding the page’s structure. Headings are crucial for conveying the webpage’s organization, and it is vital for screen reader users to be able to access their contents. Although heading markup can make text stand out, using it for purposes other than headings can confuse users of assistive technology. Furthermore, besides enhancing accessibility, headings also benefit search engines by facilitating result filtering and display, thus increasing page discoverability. Properly crafted and well-ordered headings enable screen reader users to navigate and comprehend web content efficiently.

Examples

• Success:

  • Using a heading element with no content.

• Failure:

  • Using aria-hidden="true" with a heading element.

How to fix?

Ensure the following:

• All heading elements contain content.
• The content is not hidden using aria-hidden="true" or through CSS.
• The heading hierarchy gives a broad understanding of the information presented on the page.
• The appropriate heading tags are used only when you are creating a heading and not for any other type of text.

Tags

cat.name-role-value, best-practice

References

• WCAG 2.1 Technique G130
• WCAG 2.1 Technique ARIA12
• Deque University: empty-heading