Nav elements must contain links

ZMD015

Ensure every <nav> section includes at least one navigational link (<a>, <button role="link">, etc.) to provide meaningful navigation landmarks.

✅ Good

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
  </ul>
</nav>

❌ Bad

<nav>
  <ul></ul>
</nav>

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 :contentReference[oaicite:8]{index=8}.

SEO: Navigation structures without links offer no crawlable paths for search engines.

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 :contentReference[oaicite:6]{index=6}.
  • Keyboard-only users receive clear tab stops for navigation :contentReference[oaicite:7]{index=7}.

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 :contentReference[oaicite:9]{index=9}.

See also