Heading Structure Analyzer – Test SEO & Accessibility

Proper heading structure is critical for accessibility because: Screen reader navigation: Users can jump between headings to quickly scan content Content comprehension: Headings provide context and help users understand page organization Keyboard shortcuts: Screen readers offer shortcuts to navigate by heading level (H1, H2, etc.) Document outline: Creates a logical outline that reflects content hierarchy Cognitive accessibility: Clear structure helps users with cognitive disabilities According to WebAIM screen reader surveys, headings are one of the most important ways users navigate web pages.

Yes! Every page should have exactly one H1 that describes the main topic or purpose of the page. Why it matters: Provides a title for screen reader users Establishes the main topic immediately Improves SEO (search engines use H1 as primary heading) Creates proper document outline WCAG best practice for information hierarchy Common mistakes: Using logo/site name as H1 (use H1 for page-specific title) Having multiple H1s (only one per page) Skipping H1 entirely Using H1 for styling instead of semantic meaning

Skipping heading levels means jumping from one level to a non-consecutive level, like H2 directly to H4 (skipping H3). Example of skipped level: <h1>Page Title</h1> <h2>Section 1</h2> <h4>Subsection</h4> ⚠️ Skipped H3! Why it's a problem: Confuses screen reader users about content hierarchy Breaks document outline structure Makes it harder to navigate by heading level Violates WCAG 1.3.1 (Info and Relationships) Solution: Always use consecutive heading levels (H1 → H2 → H3). You can go back up (H4 → H2) but not skip down.

No! Headings should reflect content structure, not visual design preferences. Wrong approach: /* Don't do this */ <h3>Small text</h3> /* Used H3 because you want smaller text */ <h2>Bigger text</h2> /* Used H2 for larger text */ Right approach: /* Use semantic headings */ <h2>Section Title</h2> <h3>Subsection</h3> /* Style with CSS */ h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; } Key principle: Semantic HTML first, styling second. Use CSS to adjust visual appearance while maintaining proper heading hierarchy.

While there's no hard limit, follow these guidelines: Ideal length: 40-70 characters (about one line) Maximum: 100 characters for most cases Minimum: Descriptive enough to convey topic (avoid one-word headings) Best practices: Be concise but descriptive Front-load important keywords Avoid full sentences in headings Use sub-headings to break up long topics Consider both accessibility and SEO For SEO: Search engines may truncate headings in search results (around 60 characters), so put key information first.

Adding IDs to headings is a good practice when: You want to create anchor links to specific sections Building a table of contents with jump links Using aria-labelledby to reference headings Creating deep links for sharing specific content Best practices for heading IDs: Use kebab-case (lowercase with hyphens) Make IDs descriptive and readable Keep IDs stable (don't change on every deployment) Ensure IDs are unique on the page Example: <h2 id="getting-started">Getting Started</h2> <h3 id="installation">Installation</h3> <h3 id="configuration">Configuration</h3>