What the issue is
Using heading tags (h1, h2, h3, etc.) for styling purposes rather than to structure content hierarchically misleads users who rely on assistive technologies. For example, choosing an <h4> tag because it visually matches the desired text size, despite it being a primary section title that logically should be an <h1> or <h2>. This misuse of headings disrupts the document's structure, leading users to misinterpret the level of importance of various sections on the page.
Why this is important
Assistive technologies, like screen readers, use headings to navigate content, enabling users to understand how the content is organized and to jump between sections efficiently. When headings are used incorrectly for visual appeal rather than semantic structure, it can make navigation and comprehension difficult for users, as the logical structure of the document is obscured. This can particularly impact users with visual impairments who rely on screen readers to interpret the page structure.
Who it affects
This issue affects:
- Users of assistive technologies who navigate web content through semantic markup.
- Users with cognitive disabilities who depend on a well-structured content presentation to understand the information hierarchy.
- All users, because a logical document structure aids in easier and quicker comprehension of web content, enhancing the overall user experience.
How to remediate the issue
- Ensure that headings are used to define the structure of the content, reflecting the hierarchical organization of the information presented on the page.
- Avoid using heading tags for styling text—use CSS for visual presentation instead while maintaining the correct order of headings for proper document structure.
- Check the document's structure with a screen reader or through a document outline tool to ensure that headings correctly represent the semantic organization of content.
- Train content creators and developers in the proper use of HTML headings to cultivate an awareness of accessibility practices in content organization.
Guidance on structuring content with headings 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]