Landmark regions are uniquely labeled when multiple exist

Two unlabeled <nav> elements on the same page — a main navigation and a footer navigation — are indistinguishable in a screen reader's landmark navigation list. Screen readers present landmarks as a list ('navigation, navigation') and users cannot tell which is which without entering each one. WCAG 2.2 SC 1.3.1 (Info and Relationships) requires semantic relationships to be programmatically exposed. SC 2.4.6 (Headings and Labels) requires that labels, when present, be descriptive. Section 508 2018 Refresh 502.3.5 covers information flow relationships. The specific failure: a screen reader user invokes landmark navigation, sees two 'navigation' entries, enters the wrong one, and must back out and try the other. This adds unnecessary navigation overhead on every page.

Add aria-label attributes to all landmark regions that share a type with another element on the same page. This is most common with <nav> (main + footer + breadcrumb) and <section> elements.

// In src/app/layout.tsx or your Header/Footer components

<header>
  <nav aria-label="Main navigation">
    <NavLinks />
  </nav>
</header>

<main id="main-content">
  {/* If there's an in-page nav (e.g., article table of contents) */}
  <nav aria-label="Article sections">
    <TableOfContents />
  </nav>
  {children}
</main>

<footer>
  <nav aria-label="Footer navigation">
    <FooterLinks />
  </nav>
</footer>

If a landmark region is headed by a visible <h2> or <h3>, use aria-labelledby pointing to that heading's id instead of duplicating the text in aria-label. Only apply labels when there are genuinely multiple landmarks of the same type — a single <nav> needs no aria-label.