ARIA Landmark & Heading Hierarchy Auditor

Introduction

Heading structure and landmarks are two of the most important foundations of an accessible page. Headings create the content outline, while landmarks help assistive technology users jump between major regions such as navigation, main content, and footer.

This tool gives you a fast local review of both structures before you test with real assistive technology.

How it works

The tool parses your pasted HTML with DOMParser. It does not insert the pasted markup into the live page, and it does not execute scripts from the pasted content.

• Headings are collected in document order.
• Heading levels are compared to detect skipped levels.
• Landmarks are detected from semantic HTML and ARIA roles.
• Accessible labels are read from aria-label and aria-labelledby where available.

How to use

1. Paste a full HTML document or a fragment.
2. Click Audit HTML.
3. Review messages, heading outline, and landmark list.
4. Copy the report for documentation or ticketing.

Practical example

A well-structured page usually has one H1, a logical descending heading outline, and clear landmarks:

<header>
  <h1>Product Documentation</h1>
</header>

<main>
  <h2>Getting Started</h2>
  <section aria-label="Installation">
    <h3>Installation</h3>
  </section>
</main>

<footer>
  <p>Published by Example Team.</p>
</footer>

Use cases

• Reviewing a page before accessibility testing.
• Debugging why headings appear incorrectly in screen-reader navigation.
• Checking whether main content is exposed through a main landmark.
• Finding repeated navigation or region landmarks that need labels.
• Documenting accessibility issues in a bug ticket.

Best practices

• Use one clear H1 for the page title or primary heading.
• Avoid skipping heading levels purely for visual styling.
• Use semantic HTML before adding ARIA roles.
• Provide accessible labels for repeated landmarks.
• Ensure main content is inside a main landmark.

Common mistakes

• Using heading levels only to control font size.
• Adding unnecessary ARIA roles when native elements already work.
• Creating multiple unlabeled navigation landmarks.
• Omitting the main landmark.
• Using empty headings as decorative spacing.

Limitations

• This tool performs heuristic checks, not full WCAG conformance testing.
• It cannot fully evaluate visual design, reading order, or focus behavior.
• It does not test live JavaScript-rendered content unless you paste the rendered HTML.
• It does not replace manual testing with assistive technologies.

Browser compatibility

The tool itself works in current versions of major browsers. The accessibility patterns it checks are based on widely supported HTML and ARIA concepts.

FAQ

Related tools

• Color Contrast Matrix Generator
• prefers-reduced-motion CSS Transition Auditor
• Touch Target Size & Spacing Visualizer
• Screen Reader Text Generator & Tester

References

• MDN Web Docs: ARIA roles
• MDN Web Docs: Heading elements
• W3C: ARIA Authoring Practices Guide

Version and changelog

• Version: 1.0.0
• Last updated: August 8, 2026
• Changelog: Initial production release.