Date Add / Subtract Calculator
About Heading Hierarchy Checker
The HTML Heading Hierarchy ($H_1 \to H_6$) & Document Outline Accessibility Auditor parses raw HTML strings or DOM trees to detect skipped heading levels (e.g. `h2` to `h4`), missing `h1` main page headings, multiple `h1` instances, and empty headings according to WCAG 2.1 SC 1.3.1 (Info and Relationships) and SC 2.4.6.
How to Use Heading Hierarchy Checker
Step 1
Paste HTML markup, rich text, or page source code into the editor.
Step 2
Click "Analyze Heading Hierarchy".
Step 3
Review visual tree outline and flagged accessibility warnings.
Step 4
Click "Copy Hierarchy Report".
Practical Use Cases for Heading Hierarchy Checker
Technical SEO & Screen Reader Navigation Hierarchy Audits
Audit blog posts and landing pages to ensure headings form an unbroken tree outline for search crawler indexing and screen reader rotor navigation.
CMS Template & Markdown Heading Conversion Verification
Verify that headless CMS rich text outputs and Markdown rendering engines do not skip heading ranks across nested components.
Input & Output Examples
Analyzing Malformed HTML Heading Outline
HTML: `<h1>Title</h1><h3>Sub-topic</h3>`
Violations: `1 Warning (Skipped Level)` | Details: `Found <h3> directly following <h1> (Missing <h2>)` | WCAG Status: `FAIL (SC 1.3.1)`
Key Features & Performance
- ✓DOM Heading Parser: builds complete interactive nested visual tree of all `h1`, `h2`, `h3`, `h4`, `h5`, and `h6` tags.
- ✓Accessibility Rule Engine: flags Skipped Levels, Multiple `<h1>`s, Empty Headings, and ARIA `role="heading"` level mismatches.
- ✓Screen Reader Outline Simulator: displays document map as perceived by VoiceOver rotor and NVDA elements list (`Insert + F7`).
- ✓100% Client-Side memory execution.
- ✓1-Click Copy heading audit report.
Key Terminology & Definitions
Heading Level Skipping
The bad practice of jumping down heading ranks without sequential continuity (e.g., from `h2` to `h4`), which disorients screen reader users relying on structured document navigation.
Screen Reader Rotor (Heading List)
An assistive technology navigation menu (e.g., in Apple VoiceOver) that lists all headings on a page, allowing users to jump directly to specific content sections.