1.3.1 Info and Relationships

Introduction¶

This article provides information about the Acquia Optimize 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:

  copy

  <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.

• CSS instead of headings for styling text:

  copy

  <p class="large-bold-text">Welcome to Our Store</p>
  .large-bold-text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }

  • CSS achieves the desired look.

Fail examples¶

• A heading to make the text big and bold:

  copy

  <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:

  copy

  <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:

  copy

  <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¶

1. Check that all headings <h1> to <h6> serve a structural purpose.
2. 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.
3. 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.
4. Test with a screen reader such as NVDA or VoiceOver to ensure that the headings are meaningful.

How to fix it¶

• Use proper heading hierarchy:

  copy

  <h1>Main Title</h1>
  <h2>Subheading</h2>
  <h3>Detailed Topic</h3>

  • This ensures a clear, logical structure for content.

• Use CSS instead of headings for visual styling:

  copy

  <p class="styled-text">Our Mission</p>
  .styled-text {
    font-size: 24px;
    font-weight: bold;
  }

  • This maintains accessibility and design flexibility.

• Do not skip heading levels:

  copy

  <h1>About Us</h1>
  <h2>Our Team</h2>
  <h3>Meet the Founders</h3>

  • Each level flows logically, which makes navigation easier.

Additional resources¶

WCAG success criteria¶

1.3.1 Info and Relationships