Screen reader users navigate by landmarks. Paste your HTML to see the landmark tree and catch a missing main, duplicate or unlabeled regions and content left outside any landmark.
Runs entirely in your browser. Nothing is uploaded to any server.
Screen reader users can list landmarks and jump straight to the navigation, main content or footer.
Using header, nav, main, aside and footer correctly gives you landmarks without extra ARIA.
Content outside landmarks can be skipped by users who navigate region by region.
Landmarks come from explicit ARIA roles or from native elements, following the HTML Accessibility API Mappings. main and nav are always landmarks. A header or footer is a banner or contentinfo landmark only when it is not inside article, aside, main, nav or section; inside those it is just a generic container. A section or form becomes a landmark only when it has an accessible name, and an aside nested in sectioning content needs a name too.
The checker then verifies there is exactly one visible main, at most one banner and contentinfo, that those three are not nested inside other landmarks, and that repeated landmarks such as two navs have unique labels. Finally it walks the page to find text and form controls that sit outside every landmark.
Exactly one visible main landmark per page.
Two navs need labels like "Main" and "Footer".
banner, main and contentinfo should not be nested.
No. Modern browsers map <main> to the main landmark automatically.
A header inside article, aside, main, nav or section is scoped to that content and is not a banner landmark. That is correct behavior.
Not by itself, but it is a best practice recommended by many audits because landmark navigation users may never find it.
Landmarks with the hidden attribute are listed but excluded from duplicate and count checks. CSS-hidden elements cannot be detected without rendering.
No. It is parsed in your browser with DOMParser and no scripts are run.
More free tools from My Panda Toolbox.