<nav> + the role of landmark roles

A page often has two <nav>s

<header>
  <nav aria-label="Primary">
    <ul><li>Home</li><li>Courses</li></ul>
  </nav>
</header>
…
<footer>
  <nav aria-label="Footer">
    <ul><li>About</li><li>Contact</li><li>Privacy</li></ul>
  </nav>
</footer>

When you have two or more of the same landmark type, give each an aria-label so screen readers can distinguish them. Without labels, VoiceOver announces "navigation… navigation…" — useless.

<nav> is for groups of navigation, not single links

Don't wrap one link in <nav>:

<!-- overkill, just use <a> -->
<nav><a href="/back">Back</a></nav>

<!-- good — list of related navigation links -->
<nav aria-label="Section navigation">
  <a href="/intro">Intro</a>
  <a href="/basics">Basics</a>
  <a href="/advanced">Advanced</a>
</nav>

<nav> adds a "navigation" landmark to the accessibility tree. Sprinkling it on single links pollutes the landmark list.

Inside vs outside lists

Wrapping nav links in <ul><li> is a long-standing convention — screen readers announce "list of N items," which helps users know how many links to expect. Modern guidance is split (some say the <ul> is overkill on a flat nav), but the convention is still standard.