What the issue is
Using headings (h1, h2, h3, etc.) improperly by skipping levels in the page structure can make it confusing for users who rely on assistive technologies to navigate web content. For example, moving directly from an h1 to an h3 heading without an intervening h2 disrupts the hierarchical structure of a page. This can lead to misunderstanding of the content structure and difficulty in navigation for those using screen readers, as they rely on the (announced) heading levels to userstand content hierarchy and importance and utilzie short-cut heading navigation.
Why this is important
Maintaining a logical heading structure is crucial for providing a clear and coherent content structure. It aids users of assistive technologies in understanding the relationship between different sections of content. A proper heading hierarchy enables easy navigation of the page contents, particularly for screen reader users who may choose to skip from one heading to the next without reading the intervening text. Misuse of headings can result in a confusing or misleading representation of the page structure, making it difficult for users to find the information they need.
Who it affects
This issue affects:
- Users of screen readers and other assistive technology that utilize headings for navigation.
- Users with cognitive disabilities who benefit from a clear and consistent structure to understand the organization of content.
- All users, as a logical structure supports easier comprehension and navigation of web content for everyone, not just those with disabilities.
How to remediate the issue
- Review the page structure to ensure that headings are used correctly and in a logical hierarchical order (e.g., do not jump from h1 directly to h3).
- Use headings consistently across pages, following a logical pattern that reflects the structure and flow of the content.
- Avoid using headings simply for visual effect or styling; ensure that their use indicates the semantic structure of the webpage content.
- Regularly test your web content with screen readers and other assistive technologies, as well as through structured inspection methods (e.g., viewing the page structure in a document outline view), to ensure that the heading hierarchy correctly represents the page structure.
Guidance on proper use of headings for content structure can be found at WCAG Quick Reference on Info and Relationships.
WCAG Success criteria at risk: 1.3.1 [Info and Relationships], 2.4.6 [Headings and Labels]