Code Fix Guide

How to Fix HTML Heading Structure

Improper heading structure — skipping levels, using multiple H1 tags, or using headings for styling instead of structure — is both an SEO problem and an accessibility violation. Screen readers use headings to create a page outline for navigation.

Common Errors and How to Fix Them

Skipping heading levels (h1 → h3 → h5)

Problem

<h1>Page Title</h1>
<h3>Section</h3>
<h5>Subsection</h5>

Fix

<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

Using headings for styling, not structure

Problem

<h2 class="big-text">Welcome</h2>
<p>...</p>
<h2 class="big-text">Footer</h2>

Fix

<h1>Welcome</h1>
<p>...</p>
<div class="big-text" role="contentinfo">Footer</div>

Styled div instead of a heading

Problem

<div class="title">About Us</div>

Fix

<h2>About Us</h2>

Why This Matters

Improper headings violate WCAG 1.3.1 (Info and Relationships) and 2.4.6 (Headings and Labels). Screen reader users navigate by headings — 67% of screen reader users say headings are their primary navigation method. A proper heading hierarchy also improves SEO by helping search engines understand your page structure.

Related WCAG Criteria

1.3.1Info and Relationships

Level A — Perceivable

2.4.6Headings and Labels

Level AA — Operable

Find All Your Accessibility Issues Automatically

ADA CodeFix scans your website for WCAG 2.1 AA violations and generates AI-powered code fixes — not vague descriptions, actual code you can copy-paste.

Scan Your Site Free

No credit card required AI-generated code fixes

More Code Fix Guides

How to Fix Missing Alt Text on Images

Missing alt text is the #1 accessibility violation. Learn how to add proper alt attributes to images with code examples and an automated scanner.

How to Fix Low Color Contrast in CSS

Low color contrast is found on 80%+ of websites. Learn the WCAG contrast ratios, test your colors, and fix CSS contrast issues with code examples.

How to Fix Missing Form Input Labels

Form fields without labels are inaccessible to screen reader users. Learn how to properly label inputs with HTML label elements and ARIA attributes.

How to Fix Empty Links and Buttons

Empty links and buttons with no accessible text are a top accessibility violation. Learn how to add descriptive text and ARIA labels with code examples.

How to Fix Keyboard Navigation and Focus Issues

If your website can't be navigated with a keyboard, it's inaccessible. Learn how to fix tab order, focus styles, keyboard traps, and custom components.

How to Fix ARIA Attribute Errors

Incorrect ARIA attributes can make accessibility worse, not better. Learn the most common ARIA mistakes and how to fix them with proper code examples.