This article provides information about the accessibility check:
All heading elements are not used for formatting.
What
Heading elements <h1> to <h6> must only be used for structuring content, not for visual formatting. Headings define the hierarchy and organization of page content, which makes it easier for users to navigate and understand the content.
Use heading elements for structural purposes to create fewer accessibility issues and make the content easier to interpret. Use CSS for styling.
Why
This section provides some benefits and problems associated with this success criteria.
Proper headings benefit all users
Quick navigation:
Screen reader users rely on headings to quickly navigate through a page.
Comprehension:
Users with cognitive disabilities benefit from well-structured content that makes it easier to scan and understand.
SEO (Search Engine Optimization):
The SEO score improves when headings are used meaningfully. Proper headings help search engines to navigate the content better.
Problems with headings for formatting
Misleading content structure:
If an <h3> is used only for bold text but has no logical connection to the content hierarchy, users who rely on headings for navigation are misled.
Inconsistent navigation:
Assistive technologies generate an outline of the page based on headings. Headings that are used only for styling make the outline ineffective.
Styling limitations:
Headings are included with default browser styling. Use of headings only for formatting rather than structure limits control over a consistent design.
Examples
This section provides some pass and fail examples of this check.
Pass examples
Headings used correctly to define sections:
<h1>Company Overview</h1>
<p>Welcome to our company. We specialize in...</p>
<h2>Our Services</h2>
<p>We offer a range of services, including...</p>
<h3>Web Development</h3>
<p>We build accessible and modern websites.</p>
The headings clearly define sections and help users navigate the content logically.
<h3>Welcome to Our Store</h3>
<p>Shop now for the best deals.</p>
Issue: The <h3> does not serve a structural purpose, and is only used for visual styling.
Skipped heading levels for styling convenience:
<h1>Home</h1>
<h4>About Us</h4>
Issue: When the format skips levels, for example, a jump from <h1> to <h4>, the logical structure breaks and it becomes hard for users to follow the hierarchy.
Multiple <h1> elements that are used incorrectly:
<h1>Main Title</h1>
<h1>Another Section</h1>
Issue: One page must ideally have only one <h1>.
Affected users
This issue affects:
Screen reader users: Who rely on headings for navigation.
Users with cognitive disabilities: Who depend on logical page structure.
Developers and content editors who maintain the website: Who manage content.
How
This section provides instructions on how to review and fix the issue.
How to review it
Check that all headings <h1> to <h6> serve a structural purpose.
Use developer tools to view the heading structure.
In Chrome DevTools:
Open the Elements panel
Use the Accessibility tab to view the heading hierarchy.
Use a browser extension such as HeadingsMap to visualize the heading order.
Ensure that headings are not used purely for visual styling.
If a heading does not represent a content section, replace it with a <p> or a <span> styled with CSS.
Test with a screen reader such as NVDA or VoiceOver to ensure that the headings are meaningful.
This article provides information about the accessibility check:
All heading elements are not used for formatting.
What
Heading elements <h1> to <h6> must only be used for structuring content, not for visual formatting. Headings define the hierarchy and organization of page content, which makes it easier for users to navigate and understand the content.
Use heading elements for structural purposes to create fewer accessibility issues and make the content easier to interpret. Use CSS for styling.
Why
This section provides some benefits and problems associated with this success criteria.
Proper headings benefit all users
Quick navigation:
Screen reader users rely on headings to quickly navigate through a page.
Comprehension:
Users with cognitive disabilities benefit from well-structured content that makes it easier to scan and understand.
SEO (Search Engine Optimization):
The SEO score improves when headings are used meaningfully. Proper headings help search engines to navigate the content better.
Problems with headings for formatting
Misleading content structure:
If an <h3> is used only for bold text but has no logical connection to the content hierarchy, users who rely on headings for navigation are misled.
Inconsistent navigation:
Assistive technologies generate an outline of the page based on headings. Headings that are used only for styling make the outline ineffective.
Styling limitations:
Headings are included with default browser styling. Use of headings only for formatting rather than structure limits control over a consistent design.
Examples
This section provides some pass and fail examples of this check.
Pass examples
Headings used correctly to define sections:
<h1>Company Overview</h1>
<p>Welcome to our company. We specialize in...</p>
<h2>Our Services</h2>
<p>We offer a range of services, including...</p>
<h3>Web Development</h3>
<p>We build accessible and modern websites.</p>
The headings clearly define sections and help users navigate the content logically.
<h3>Welcome to Our Store</h3>
<p>Shop now for the best deals.</p>
Issue: The <h3> does not serve a structural purpose, and is only used for visual styling.
Skipped heading levels for styling convenience:
<h1>Home</h1>
<h4>About Us</h4>
Issue: When the format skips levels, for example, a jump from <h1> to <h4>, the logical structure breaks and it becomes hard for users to follow the hierarchy.
Multiple <h1> elements that are used incorrectly:
<h1>Main Title</h1>
<h1>Another Section</h1>
Issue: One page must ideally have only one <h1>.
Affected users
This issue affects:
Screen reader users: Who rely on headings for navigation.
Users with cognitive disabilities: Who depend on logical page structure.
Developers and content editors who maintain the website: Who manage content.
How
This section provides instructions on how to review and fix the issue.
How to review it
Check that all headings <h1> to <h6> serve a structural purpose.
Use developer tools to view the heading structure.
In Chrome DevTools:
Open the Elements panel
Use the Accessibility tab to view the heading hierarchy.
Use a browser extension such as HeadingsMap to visualize the heading order.
Ensure that headings are not used purely for visual styling.
If a heading does not represent a content section, replace it with a <p> or a <span> styled with CSS.
Test with a screen reader such as NVDA or VoiceOver to ensure that the headings are meaningful.