HTML Layers

See the semantic structure of any page as layers: headings, landmarks and lists, with checks for heading order and landmarks.

HTML Layers draws the semantic structure of a page right on top of it, so you can see how headings, landmarks and lists are organized without opening DevTools. Made for designers, developers and anyone learning HTML semantics and accessibility. WHAT YOU SEE Headings (h1 to h6 and role="heading") outlined in blue, with their level on a label Landmarks (banner, navigation, main, complementary, contentinfo, search, form, region) outlined in violet, with their accessible name when there is one Lists in yellow, as an optional layer Hidden elements: dashed outlines for content that is visually hidden, aria-hidden, inert or off screen, plus a list in the panel for display:none and visibility:hidden WHAT IT CHECKS Skipped heading levels Missing or repeated h1 Empty headings Missing or repeated main landmark Repeated landmarks without a name Issues get an alert icon, never color alone. The checks relate to WCAG success criteria 1.3.1 Info and Relationships, 2.4.1 Bypass Blocks and 2.4.6 Headings and Labels. HTML Layers is an inspection and learning tool, not a full accessibility audit. SIDE PANEL Tree of headings and landmarks Hover an item to highlight it on the page, and the other way around Click an item to scroll to it and spotlight it Light or dark veil picked automatically from the page colors, or set by hand Shortcut: Alt+Shift+L PRIVACY HTML Layers only runs when you click its icon, on the current tab. Everything happens locally in your browser. No data is collected, stored or sent anywhere. If you want it to keep working when you switch tabs or reload, you can turn on "Allow on all sites" in the panel.