Breadcrumbs present for deep hierarchies

WCAG 2.2 SC 2.4.8 (Location, Level AAA) recommends breadcrumbs for sites with hierarchical structure — but for government sites with services organized 3–4 levels deep (e.g., /services/health/insurance/dental), breadcrumbs are a practical navigation necessity, not a luxury. Without them, users who land on a deep content page via search have no path back to parent sections, and users with cognitive or memory disabilities cannot orient themselves within the site. Federal sites with large service catalogs that lack breadcrumbs routinely show high exit rates on deep pages.

Add a breadcrumb component to any route nested 3 or more levels deep. Use aria-label="Breadcrumb" and mark the current page with aria-current="page".

// components/Breadcrumbs.tsx
interface BreadcrumbItem { label: string; href?: string }

export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
  return (
    <nav aria-label="Breadcrumb">
      <ol>
        {items.map((item, i) => (
          <li key={i}>
            {item.href ? (
              <a href={item.href}>{item.label}</a>
            ) : (
              <span aria-current="page">{item.label}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  )
}

// Usage in app/services/health/insurance/page.tsx
<Breadcrumbs items={[
  { label: 'Home', href: '/' },
  { label: 'Services', href: '/services' },
  { label: 'Health', href: '/services/health' },
  { label: 'Insurance' },
]} />

• ID: gov-web-standards.plain-language.breadcrumbs

• Severity: info

• What to look for: For pages nested more than 2 levels deep (e.g., /services/health/insurance), look for breadcrumb navigation showing the page hierarchy (e.g., "Home > Services > Health > Insurance"). Check multiple pages, especially documentation or policy sections.

• Pass criteria: Pages nested 3 or more levels deep display breadcrumb navigation showing the full path from root to current page. Enumerate all pages at depth 3 or greater and verify each has breadcrumbs.

• Fail criteria: At least 1 page at depth 3 or more lacks breadcrumbs, making it hard for users to navigate the hierarchy.

• Skip (N/A) when: The site is single-level or two-level only (no pages 3+ levels deep).

• Detail on fail: "Page at /services/benefits/health/dental has no breadcrumbs — users cannot easily navigate back to parent sections" or "Breadcrumbs only show up to 2 levels, not the full path"

• Remediation: Add a breadcrumb component to pages nested 3+ levels deep:

  // components/Breadcrumbs.tsx
  export function Breadcrumbs({ items }) {
    return (
      <nav>
        {items.map((item, idx) => (
          <span key={idx}>
            <Link href={item.href}>{item.label}</Link>
            {idx < items.length - 1 && ' > '}
          </span>
        ))}
      </nav>
    )
  }