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.

• ID: accessibility-basics.keyboard-focus.landmark-region-labels

• Severity: info

• What to look for: Enumerate every relevant item. When multiple landmark regions of the same type exist on a page (e.g., two <nav> elements), check whether they have unique labels via aria-label or aria-labelledby to distinguish them for screen reader users.

• Pass criteria: At least 1 of the following conditions is met. When multiple landmarks of the same type exist, each is uniquely labeled via aria-label or aria-labelledby.

• Fail criteria: Multiple landmarks of the same type exist without unique labels.

• Skip (N/A) when: The page has only one landmark of each type.

• Detail on fail: Describe the unlabeled landmarks. Example: "Two <nav> elements exist (main navigation and footer navigation) but neither has aria-label to distinguish them."

• Remediation: Add unique labels to duplicate landmark types:

  <nav aria-label="Main navigation">...</nav>
  <main>...</main>
  <nav aria-label="Footer navigation">...</nav>