WCAG 1.3.1 — Info and Relationships: Heading Structure Skips Levels

Who Is Affected

Blind users who rely on screen readers to navigate content, users with cognitive disabilities who benefit from consistent document structure, and anyone using keyboard navigation or voice control software.

What This Means

Headings create an outline of your page content, like a table of contents in a book. They should follow a logical hierarchy: H1 for the main title, H2 for major sections, H3 for subsections under H2, and so on. When you skip from H1 directly to H3, or H2 to H5, it creates confusion.

Screen readers use this heading structure to build a navigation menu, allowing users to jump between sections. When levels are skipped, users may miss content or become disoriented about the page's organization.

This commonly happens when content editors choose headings based on visual appearance rather than structural meaning, or when themes don't provide appropriately styled heading options.

Fix: Content Editor

1. Audit your heading structure using the HeadingsMap browser extension or WAVE tool to see your current heading outline.

2. Fix the hierarchy by ensuring headings follow sequential order:

   • Page should have exactly one H1 (usually the page title)
   • Major sections use H2
   • Subsections under H2 use H3
   • Subsections under H3 use H4, and so on

3. Don't skip levels:

   • ❌ Wrong: H1 → H3 → H2
   • ✅ Correct: H1 → H2 → H3

4. In your content editor:

   • Joomla: Use the Format dropdown in TinyMCE editor, select Headings → Heading 2, 3, etc.
   • WordPress: Use the Heading block and select the appropriate level from the toolbar
   • Other CMSs: Look for heading options in your text formatting toolbar

5. If a heading looks too big or small: Don't change the heading level — instead, ask your web team to adjust the CSS styling for that heading level.

Fix: CMS / Theme

If content editors are choosing incorrect heading levels because the default styling doesn't match their visual needs:

1. Review your theme's heading styles (H1 through H6) to ensure they provide appropriate visual hierarchy.

2. Adjust CSS styling rather than allowing incorrect heading markup:

   h3 {
     font-size: 1.2em; /* Adjust size as needed */
     color: #333;
     margin-bottom: 1em;
   }
   

3. In Joomla: Go to Extensions → Templates → Your Template → Edit Files → css/template.css

4. In WordPress: Go to Appearance → Theme Editor → style.css (or use Customizer → Additional CSS)

5. Provide editor training on the difference between semantic structure (heading levels) and visual appearance (styling).

Standard Reference

WCAG 2.1 Success Criterion 1.3.1 — Info and Relationships, Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. Heading markup must convey the structure and hierarchy of content.

• W3C Understanding SC 1.3.1
• WCAG Technique H42 — Using h1-h6 to identify headings
• WCAG Technique G141 — Organizing a page using headings
• WCAG Failure F43 — Using structural markup inappropriately