Headings

Test Page Notice

This page contains intentionally problematic accessibility patterns for testing and demonstration purposes only.

Do not use these examples in production websites. They violate accessibility guidelines and best practices.

This page is designed to work with the Accessibility Visualizer browser extension to help developers identify and understand accessibility issues.

Headings provide a hierarchical structure to web content, helping users understand page organization and navigate efficiently. Assistive Technologiess use headings as navigation landmarks, so proper heading structure helps users to reach their objective content.

Heading Hierarchy

Heading hierarchy demonstration

This example shows the standard HTML heading hierarchy from h1 to h6, plus a custom heading using ARIA attributes. Notice how heading levels should follow a logical order.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Custom Heading (role="heading" aria-level="7")

Best practices:

Start with h1 for main page title
Don't skip heading levels (h1 → h3 without h2)
Use headings to create a logical content outline first

Problematic Headings

Problematic heading: Skipped level

❌ This example shows incorrect heading hierarchy where h4 appears without h2 or h3. This breaks the logical document structure.

Main Title (h1)

Skipped to h4 - This is problematic!

This h4 should be h2 to maintain proper hierarchy.

Empty heading

❌ Heading element with no text content. Assistive technology users cannot predict the content about the part with this heading.

This h6 element contains no text and provides no value to users.