# Landmark regions are uniquely labeled when multiple exist

- **Pattern:** `ab-000063` (`accessibility-basics.keyboard-focus.landmark-region-labels`)
- **Severity:** info
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000063
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000063)

## Why it matters

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.

## Severity rationale

Info because unlabeled duplicate landmarks add minor navigation friction without preventing access to any content or functionality.

## Remediation

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.

```tsx
// 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`.

## Detection

- **ID:** `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:

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

## External references

- wcag 1.3.1
- wcag 2.4.6
- section-508 502.3.5

Taxons: accessibility

HTML version: https://auditbuffet.com/patterns/ab-000063