What This Rule Checks
When paragraph elements are styled to look like headings using bold or large text, screen reader users cannot navigate by heading structure. Proper heading elements (h1-h6) convey document structure and enable efficient page navigation for assistive technology users.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Cognitive users, who benefit from clear structure, simple language, and consistent navigation patterns.
Why This Matters
Screen reader users navigate pages by heading structure. Styled paragraphs are invisible to heading navigation, causing users to skip important sections entirely. Heading-based navigation is the most-used screen reader feature.
How to Fix
Replace styled paragraphs with the appropriate heading level element (h1-h6). Maintain a logical heading hierarchy. Use CSS to style headings to match the desired visual appearance rather than styling non-heading elements.
Code Examples
<!-- Paragraph styled to look like a heading -->
<p style="font-size: 24px; font-weight: bold;">
Important Section
</p>
<p>
Content under this fake heading.
</p>
Copy
<!-- Proper heading element -->
<h2>Important Section</h2>
<p>
Content under this real heading.
</p>
Copy
Common Mistakes to Avoid
- Using bold, large paragraphs instead of heading elements for visual emphasis.
- Using <div> or <span> with large font sizes instead of headings.
- Not updating legacy content that was styled before semantic HTML was standard practice.
Tip: Proper document structure enables assistive technologies to present content meaningfully. Headings, lists, and semantic HTML elements create a navigable outline of the page that screen reader users depend on.
Related WCAG Criteria
- 1.3.1: Info and Relationships