Skip to content

ARIA Landmark Visualizer

Paste your page HTML to visualize the ARIA landmark structure as a tree. The tool detects all landmark elements and roles (<header>, <main>, <nav>, <aside>, <footer>, <section>, <form>), checks for missing accessible names, duplicate main landmarks, and other common issues.

Why This Matters

ARIA landmarks (like <main>, <nav>, <header>) allow screen reader users to quickly jump to any section of the page — similar to how sighted users can visually scan a page. Missing or misconfigured landmarks force screen reader users to navigate linearly through all content. WCAG 1.3.6 (Identify Purpose) requires landmark regions to have accessible names when multiple of the same type exist.

How to Use This Tool

  1. 1

    Paste HTML

    Paste your full page HTML including the <body> element and all semantic landmark elements.

  2. 2

    View the tree

    The tool renders an interactive tree showing all landmark elements and their nesting hierarchy.

  3. 3

    Review issues

    Errors and warnings highlight missing <main>, unlabelled navs, or landmark misconfigurations.

  4. 4

    Apply fixes

    Add missing landmark elements or aria-label attributes as suggested by the tool.

Frequently Asked Questions

What are ARIA landmarks?

ARIA landmarks are semantic HTML elements or ARIA roles that identify major page regions. They include banner (header), navigation (nav), main, complementary (aside), contentinfo (footer), search, form, and region.

Does a <section> always create a landmark?

No. <section> only creates a 'region' landmark if it has an accessible name via aria-label or aria-labelledby. Without a name, it is treated as a generic container.

Why do navs need labels?

When a page has multiple <nav> elements (e.g., main navigation + footer navigation), screen reader users cannot distinguish between them unless each has a unique aria-label. WCAG 1.3.6 requires purpose identification.

Related Tools

Contrast Checker

Check WCAG 2.1/2.2 contrast ratios for text and UI components. Supports AA and AAA levels with live preview.

WCAG Checklist

Interactive checklist with all 86 WCAG 2.2 success criteria. Track progress, filter by level, and export your audit results.

Heading Analyzer

Paste your HTML and visualize the heading hierarchy. Detect skipped levels, missing H1s, and structural issues.

Form Checker

Check HTML forms for missing labels, improper associations, and other WCAG form accessibility violations.