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?

Ensuring that HTML heading elements contain meaningful content and are not hidden or left empty is crucial for accessibility. Screen readers rely on these headings to navigate and comprehend the structure of a webpage, providing users with visual impairments with a clear understanding of the content hierarchy. Meaningful headings also assist users who rely on keyboard navigation, enabling them to efficiently navigate through different sections of a website. Hidden or empty heading text can disrupt the user experience for individuals with disabilities, hindering their ability to understand and interact with the content effectively. Non-adherence to this rule can cause significant problems and frustration for assistive technology users, as they may encounter difficulties in comprehending the layout and organization of the webpage, leading to a disjointed and inaccessible browsing experience.

How to fix?

Adhere to these guidelines:

• Confirm that every heading tag is populated with relevant text.
• Avoid obscuring headings with techniques such as CSS visibility adjustments or the aria-hidden attribute.
• Structure headings in a way that outlines the main topics and subtopics across the page, facilitating a comprehensive overview for the reader.
• Employ heading tags (ranging from <h1> to <h6>) exclusively for headings to ensure clarity and proper page structure, rather than for styling purposes.

References

• WCAG 2.1 Technique G130
• WCAG 2.1 Technique ARIA12