Empty Heading
Critical - WCAG Level A
An empty heading is an HTML heading element (like <h1>, <h2>, etc.) that contains no text or only whitespace. This issue arises when developers use headings for styling purposes without considering their semantic importance. Headings are crucial for structuring content and providing a navigational aid for users, especially those using screen readers. When a screen reader encounters an empty heading, it can confuse users or lead them to believe there is missing content, disrupting their understanding of the page structure.
To fix this issue:
Ensure that every heading element contains meaningful text that accurately describes the section it precedes. This text should be concise yet descriptive enough to convey the purpose or topic of the section.
Avoid using headings solely for visual styling; instead, use CSS for styling and maintain semantic HTML for structure.
Best practices include:
Always provide text content for headings that reflects the content of the section.
Use CSS classes to style headings rather than inserting empty headings for spacing or design.
Regularly audit your HTML to ensure that all headings are meaningful and necessary.
Common mistakes to avoid:
Do not use empty headings as placeholders for future content.
Avoid using headings for visual effects like spacing or alignment without text content.
Ensure that headings follow a logical order (e.g.,
<h1>for main titles,<h2>for subsections, etc.) to maintain a coherent document structure.