Bug 78: Broken Heading Hierarchy (Chaos: F2)

WCAG 1.3.1 (Info & Relationships) | Heading hierarchy skips levels or used for styling.

Section 1: Introduction

Some introductory content...

Details About Subsection

This should be h3 or h4, not h5. Hierarchy is broken.

Wait, Now We're Back to h3

Screen reader users are confused about the document structure.

This is styled to look small but it's semantically h4

Looks like normal paragraph text, but announced as heading h4.

Section 2: More Content

Back to h2...

Very Deep Subsection (h6)

This is buried in hierarchy but next heading is h2...

Section 3: Another Section

The hierarchy is chaotic.

Failure F2: Hierarchy Issues Explained

Screen reader users rely on heading structure:

H1: Bug 78: Broken Heading Hierarchy H2: Section 1: Introduction H5: Details About Subsection ← JUMP! (skipped h3, h4) H3: Wait, Now We're Back to h3 ← Back up H4: This is styled to look small... H2: Section 2: More Content ← Back to h2 H6: Very Deep Subsection ← Jump to deepest level H2: Section 3: Another Section

Impact:

  • Screen reader users expect logical nesting (h1 → h2 → h3 → h4, etc.)
  • Skips confuse document structure navigation
  • Users can't tell what's a subsection vs main section
  • Keyboard navigation through headings is unreliable
Failure F2 + CSS Misuse: Headings Styled Like Paragraphs
<!-- Semantically h3, but styled to look small --> <h3 style="font-size: 14px; font-weight: normal; color: #666;"> This looks like a paragraph </h3> <!-- Paragraph that looks like a heading --> <p style="font-size: 24px; font-weight: bold;"> This looks like a heading </p>

Issue: Visual styling contradicts semantic meaning. Screen reader announces h3, but visual users see paragraph-sized text.

Failure F2: Multiple h1 Headings

Some pages have:

<h1>Company Name</h1> <h1>Page Title</h1> <h1>Article Headline</h1>

Issue: Only one h1 per page should exist. Multiple h1s confuse document outline.

CHAOS: Div Styled as Heading (No Semantic Meaning)
This Looks Like a Heading

But it's just a styled div. Screen readers don't announce it as a heading. Users can't navigate using heading shortcuts (H key in many screen readers).

HAL Fixes: HAL restructures heading hierarchy to be sequential (h1 → h2 → h3, no skips). HAL removes h1 duplicates. HAL converts div/p styled as headings to actual heading elements. HAL ensures visual styling matches semantic meaning.