Headings demo (page outline)

Compare visual-only section titles vs real headings. No tracking.

Share this demo

Copy a clean link to share (no tracking).

Theme Tip: try Tab + Enter.

Try it

Real screen readers often have a Headings list (and “jump to next heading”). If your “headings” are just bold <div>s, that list can be empty.

Mode: BAD
Keyboard: H/Shift+H
Simulated page (This demo parses the DOM: h1..h6 + [role=heading].)

Headings list

If this list is empty, users lose a major navigation tool.

    Note: role="heading" requires aria-level. Prefer real heading tags when you can.

    Related