Single <main> landmark
ZMD020ZemDomu reports a supported HTML document with no <main> or with more than one <main>. Use one visible main landmark for the page's dominant content.
What this rule catches
- Supported HTML documents whose analyzed source contains no <main> element.
- Supported documents or composed structures with more than one analyzed <main> element.
What static analysis cannot prove
- Static analysis cannot prove that the main landmark contains the correct content or that repeated content sits outside it.
- Conditional layouts and hidden runtime states may produce a different landmark count after rendering.
Standards classification and detection confidence
- Classification
- normative — The rule checks the document-level uniqueness expected for the primary main landmark.
- Detection confidence
- context dependent — The count is reliable for Core's resolved page model. Conditional layouts, hidden landmarks, and runtime composition require rendered accessibility-tree review.
Applicable WCAG 2.2 criteria
Criterion 2.4.1 is relevant to landmark-based bypass mechanisms; it does not state a numeric main-element requirement by itself.
Normative means the rule checks a machine-testable part of a cited standards requirement. Advisory means it enforces a documented authoring convention or supporting technique. Neither classification makes a ZemDomu result proof of WCAG conformance.
Examples
✅ Good
<html>
<body>
<main>
<h1>Dashboard</h1>
</main>
</body>
</html>❌ Bad
<html>
<body>
<main>Overview</main>
<main>Details</main>
</body>
</html>React and Vue notes
- React/TSX
- Keep the page-level <main> in the layout or route rather than repeating it inside reusable JSX or TSX components; verify conditional layouts after rendering.
- Vue
- Keep the page-level <main> in the app shell or route view rather than repeating it inside reusable components; verify conditional layouts after rendering.
Quick summary
When: An <html> document has no <main> or has more than one <main>
Warning: Only one <main> landmark allowed per document
Solution: Use one primary <main> landmark and move secondary regions to <section>, <aside>, or other landmarks.
Why it matters
Accessibility: A missing or duplicated main landmark makes primary-content navigation less predictable for assistive-technology users.
Tips & edge cases
- Keep global navigation, headers, and footers outside <main>.
- Use semantic sectioning elements inside the single main region for structure.