Free heading structure checker for any web page

A page's URL in, its heading outline and landmarks out, with what is wrong in them.

Check a page's headings and landmarks

Example A made-up clinic's treatments page. Enter yours to check it.

3 things to review

6 headings, 5 landmarks and a skip link.

Heading outline

  1. H1 Our treatments
    1. H2 Check-ups and cleaning
      1. H4 What to bring Skips a level
    2. H2 No text
      1. H3 Prices
    3. H2 Opening hours

Landmarks

  • Banner
  • Navigation “Main”
  • Main
  • Complementary “Opening hours”
  • Content info

Skip link “Skip to content” Target missing

Heading and landmark findings on https://example.com/ that need a person to review
Problem Element
Skip link target does not exist WCAG 2.4.1 Skip link points to "#content" but no element with that id or name exists on the page, so it goes nowhere. <a class="skip-link" href="#content">
Heading level skipped WCAG 1.3.1 h4 follows h2, skipping h3. Heading levels should not skip. <h4>What to bring</h4>
Empty heading found WCAG 1.3.1 h2 element has no text content. <h2></h2>

This reads the HTML the server sends, so a heading a script adds later is not in it, and text styled to look like a heading without being one is not found. Whether each heading's words describe its section needs a person. The free audit runs every other check on the page as a browser renders it.

What this check looks for

The tool above checks for these things on the page you give it.

Skipped heading levels
Jumps such as h2 straight to h4 that break the outline screen reader users navigate by.
Empty or missing headings
Heading tags with no text, and pages with no h1.
Missing or ambiguous main landmark
Pages without a main region, or with two main regions and no names to tell them apart.
No way to skip navigation
A skip link that points at nothing, or navigation with no skip link, main landmark or heading to jump to.

The fix, in HTML

Content is wrapped in plain divs and the page title is styled text, so screen reader users can't jump to the content or scan the page.

HTML
<!-- Broken: no landmarks, heading is just bold text -->
<div class="content">
  <div class="title">Our treatments</div>
</div>

<!-- Fixed: a main landmark and a real heading -->
<a class="skip-link" href="#main">Skip to content</a>
<main id="main">
  <h1>Our treatments</h1>
</main>

WCAG criteria

Findings from this check name one of these criteria. How much of each the audit can decide on its own:

WCAG criteria covered by the headings and landmarks check
Criterion Level Automation
1.3.1 Info and Relationships Headings, lists, tables, labels and landmarks in the markup are checked. Structure shown only visually needs a person. A Partly automated
2.4.1 Bypass Blocks A Partly automated
2.4.6 Headings and Labels AA Partly automated

What still needs a person

No automated tool can confirm these. AccessGuard marks related findings as Review, so nobody mistakes them for a pass.

  • Whether heading text describes the section it introduces (WCAG 2.4.6). Automated checks find a broken outline; only a person can judge the words.
  • Text that looks like a heading but isn't marked up as one.
  • Whether landmarks are labelled well when a page has several of the same kind.

Questions

Is it a failure to skip heading levels?

Skipping a level is a common sign that the structure doesn't match the visual design, and it confuses people who navigate by headings. AccessGuard reports it so you can decide whether the outline needs fixing.

Does every page need one h1?

WCAG doesn't require exactly one, but a single h1 that names the page is the clearest pattern for screen reader users and search engines.

Do I need a skip link if I use landmarks?

Landmarks help screen reader users, but keyboard users without a screen reader can't jump to them. A visible skip link helps both groups.

Every check, not only headings and landmarks

The free audit runs this check and every other one. Results in about a minute.

Run a free audit