No empty headings
Last updated:
How to fix an empty heading?
Add descriptive text to the heading, or remove it if it serves no structural purpose:
heading with no content
<h2></h2>
heading with only whitespace
<h2> </h2>
heading with only a decorative image and no alt text
<h2><img src="divider.png" alt=""></h2>
heading with descriptive text
<h2>Our services</h2>
heading with an image that has alt text
<h2><img src="logo.png" alt="Company name"></h2>
If you need a visual separator or decoration, use a <div> or <hr> instead of a heading element.
Why is this important?
Screen reader users often navigate a page by jumping between headings. An empty heading appears in the heading list but gives no information about the section that follows. This disrupts navigation and makes the page harder to understand.
More info:
Rule info
Standard
User impact
Minor impact Minor inconvenience for some users. Fix as time allows. Critical : blocks access entirely Serious : significantly hinders use Moderate : causes difficulty Minor : minimal disruptionFix complexity
Medium level of technical expertise required To resolve this issue, you might need some technical background. It is possible to fix this issue without needing a software developer. This depends on the Content Management System (CMS) that your website is built with.Affects
Free Website Accessibility Audit