Ensure Headings Have Discernible Text

When at least one heading element is present, it should ideally contain content.

Why It Matters

Screen readers announce heading tags to users. However, if the heading is empty or the text cannot be accessed, it can create a confusing experience.

This is important because headings relay the structure of a webpage, so it’s important that screen reader users can access the content.

Headings with discernible text also have SEO benefits.

Fixing the Issue

Developers must ensure that headings contain content and that it is screen-reader accessible.

Effective headings give users a good general idea of the page’s contents.

Make sure that you are using the correct heading markup (<h1> through <h6> elements) too.

Bad Code Examples