Headings play a critical role in communicating the structure of a web page. While sighted users can often recognise headings through visual styling such as larger text or bold formatting, assistive technologies rely on semantic markup to understand structure. Semantic markup uses HTML elements to convey meaning and hierarchy, not just appearance.
When a <p> element is visually styled to look like a heading, but it does not gain any semantic meaning. Screen readers continue to treat it as plain text, which means users cannot identify it as a section heading or use it for navigation. As a result, users lose access to the structural cues that headings are meant to provide.
How Screen Readers Use Headings
Screen readers offer dedicated navigation features for headings. Users can:
- Jump directly between headings
- View a list of all headings on a page
- Skim content by heading level (for example, only
<h2>headings)
Only elements marked up with <h1> through <h6> appear in these heading lists. Styled paragraphs do not. When headings are simulated using <p> elements, this navigation system disappears, forcing users to read content line by line to understand the page.
This increases navigation time, reduces comprehension, and adds unnecessary cognitive load.
WCAG Success Criteria
The following WCAG 2.1 success criteria explain why correct heading markup is essential for accessibility.
1.3.1 Info and Relationships (Level A)
Information and structure must be programmatically determined. A visually bold <p> element may look like a heading, but a screen reader will not recognise it as one, causing users to miss important structural relationships.
2.4.6 Headings and Labels (Level AA)
Headings must describe the topic or purpose of the content that follows.
Example:
Proper use of the <h> tag
Styled <p> tag
(Image source: https://app.uxcel.com/courses/html-for-designers/html-popular-tags-770 )
A properly marked <h2> signals the start of a new section, while a styled <p> provides no structural or navigational context.
4.1.2 Name, Role, Value (Level A)
Elements must accurately expose their role to assistive technologies.
What Proper Heading Structure Does
Headings form the backbone of a page’s document outline. A well-structured page typically begins with an <h1> for the main topic, followed by <h2> elements for major sections and <h3> elements for subsections.
This hierarchy allows assistive technologies to represent the page as an organised tree of information, making it easier for users to understand how content is grouped and how sections relate to one another.
Example
<h1>Understanding Web Accessibility</h1>
<h2>Why Accessibility Matters</h2>
<p>Accessibility ensures equal access for all users...</p>Each heading conveys meaning, level, and placement within the page structure.
Why This Matters
Screen reader users rely heavily on headings to orient themselves within a page. By navigating from heading to heading, they can:
- Skim content efficiently
- Jump directly to relevant sections
- Understand the overall layout of a page
- Avoid unnecessary or repetitive content
When headings are replaced with styled paragraphs, this structure collapses. Users must manually explore the page, often without knowing where sections begin or end.
Proper heading structure benefits not only screen reader users, but anyone scanning content quickly or navigating long pages.
Common Techniques for Proper Heading Structure
Follow these best practices to ensure headings are accessible and meaningful:
- Use
<h1>for the main page title - Use
<h2>to<h6>for lower-level sections - Never replace heading elements with styled
<p>tags - Avoid skipping heading levels when possible, as it can make the structure harder to understand
- Use CSS to control visual appearance, not HTML misuse
- Use headings to convey structure, not purely for visual emphasis
Incorrect Example
<p style="font-size: 28px; font-weight: bold;">Overview</p>Correct Version
<h2>Overview</h2>The section is now exposed correctly to assistive technologies.
How to Fix the Problem
To correct improper heading usage:
- Review pages for visually styled
<p>elements that function as headings - Replace them with the appropriate
<h1>to<h6>elements - Ensure the heading level matches the page hierarchy
- Use CSS to achieve the desired visual design
- Check that the heading structure is logical and consistent
Incorrect Use
<p class="title">Features</p>Correct Use
<h2 class="title">Features</h2>The heading is now correctly announced and navigable.
Who Is Affected
Improper heading markup affects:
- Screen reader users who rely on heading navigation
- Users navigating long or complex pages
- Anyone trying to scan or understand the page structure quickly
- Developers and content authors maintaining the site
Wrapping Up
Headings communicate structure, hierarchy, and meaning. When headings are marked up using <h1> to <h6>, assistive technologies can expose a clear outline of the page and enable efficient navigation. Styled paragraphs cannot provide this functionality.
In short, headings must be semantic, not visual hacks. Always use proper heading elements to ensure content is accessible, navigable, and understandable.
