v136 · dom
Heading Accessibility Checker
Paste any HTML. The checker parses every heading tag, applies headingoffset and headingreset to compute the effective level, detects skips in the heading hierarchy, and renders a visual outline — showing exactly how assistive technologies would see the document structure.
checking headingoffset support…
checking :heading pseudo-class…
headingoffset="N" shifts all descendant heading levels up by N (e.g. an h1 inside headingoffset="2" renders as an effective h3). headingreset resets the offset back to zero. The :heading pseudo-class matches any element with an effective heading role.
Presets
HTML to check
Document outline
Click "Check headings".
Heading audit
| Tag | Literal level | Effective level | headingoffset applied | Issues |
|---|---|---|---|---|
| Click "Check headings". | ||||
How headingoffset resolves effective level
<!-- Without headingoffset: h1 in a widget is always level 1 -->
<article>
<h2>Blog post title</h2> <!-- effective: 2 -->
<div> <!-- UGC widget -->
<h1>Widget title</h1> <!-- effective: 1 — WRONG! skips back up -->
</div>
</article>
<!-- With headingoffset="2": h1 inside shifts to effective level 3 -->
<article>
<h2>Blog post title</h2> <!-- effective: 2 -->
<div headingoffset="2"> <!-- offset by 2 -->
<h1>Widget title</h1> <!-- effective: 3 — correct ✓ -->
<h2>Widget section</h2> <!-- effective: 4 ✓ -->
</div>
</article>