Nav elements must contain links
ZMD015ZemDomu reports a supported <nav> whose analyzed content contains no link. Put the site's major navigation links inside the landmark, or remove the nav element when the content is not navigation.
What this rule catches
- Static <nav> landmarks with no supported anchor or link-equivalent descendant.
- Navigation containers whose analyzed source contains no navigable destination.
What static analysis cannot prove
- Static analysis cannot prove that the links form useful navigation or that multiple nav landmarks have distinguishable names.
- Links injected only at runtime or through unresolved component content may require rendered-DOM inspection.
Standards classification and detection confidence
- Classification
- advisory — The rule identifies navigation landmarks that appear empty or structurally incomplete; WCAG does not require every nav element to contain a direct anchor in source.
- Detection confidence
- context dependent — Resolved descendant links are reliable evidence. Router components, slots, and runtime-generated navigation can require rendered landmark inspection.
Applicable WCAG 2.2 criteria
Criterion 2.4.1 is relevant when navigation landmarks help users bypass repeated blocks; it does not prescribe this exact nav-link structure.
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
<nav>
<ul>
<li><a href="/home">Home</a></li>
</ul>
</nav>❌ Bad
<nav>
<ul></ul>
</nav>React and Vue notes
- React/TSX
- A project-aware scan is useful when a JSX or TSX nav receives its links from an imported child component; runtime-only children still need rendered testing.
- Vue
- A project-aware scan is useful when a Vue nav receives links through imported components or slots; runtime-only content still needs rendered testing.
Quick summary
When: A <nav> has no <a> or equivalent links inside
Warning: <nav> contains no links
Solution: Include at least one link inside <nav>
Why it matters
Accessibility: Empty nav landmarks are announced without useful content, impairing navigation.
SEO: Navigation structures without links offer no crawlable paths for search engines.
Rule details
In brief
- Goal: Guarantee that navigation landmarks offer actual links.
- What to do: Include one or more <a> (or equivalent) elements inside each <nav> block.
- Why: An empty <nav> fails to provide navigation cues for screen readers and keyboard users.
Intent
Prevent empty navigation landmarks by enforcing the presence of links in <nav> elements.
Benefits
- Screen-reader users can discover and jump to navigation sections based on link content.
- Keyboard-only users receive clear tab stops for navigation.
Techniques
H97: Grouping related links using the nav element per WCAG Technique H97.
HTML Semantics
The <nav> element is a sectioning container for links; empty or link-less nav elements break page semantics.
References
Tips & edge cases
- Use <nav> only for major navigation blocks; minor links can sit outside it.