Navigation is consistent across pages

WCAG 2.2 Success Criteria 3.2.3 (Consistent Navigation, Level AA) and 3.2.4 (Consistent Identification, Level AA) require that navigation appearing on multiple pages uses the same order and labeling. Government sites frequently serve citizens across dozens of sessions — inconsistent navigation forces relearning on every visit and creates confusion that disproportionately affects users with cognitive disabilities. Broken navigation links (404s) from government pages also directly block citizens from accessing services they are legally entitled to use, and are among the most common failures in federal web audits.

Extract all navigation into a single shared component and import it exclusively from app/layout.tsx — never override it in sub-layouts. Use Next.js usePathname() to highlight the active link.

// components/SiteNav.tsx
'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

const links = [
  { href: '/', label: 'Home' },
  { href: '/about', label: 'About' },
  { href: '/services', label: 'Services' },
  { href: '/contact', label: 'Contact' },
]

export function SiteNav() {
  const path = usePathname()
  return (
    <nav aria-label="Main">
      <ul>
        {links.map(({ href, label }) => (
          <li key={href}>
            <Link href={href} aria-current={path === href ? 'page' : undefined}>
              {label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  )
}

Verify all nav links resolve with curl -o /dev/null -sw "%{http_code}" <url> in CI.

• ID: navigation-consistency

• Severity: medium

• What to look for: Check the main navigation menu across multiple pages (home, about, contact). Count all navigation links and enumerate their labels. For each page, verify:

  • Same menu structure on every page
  • Consistent menu item labels and order
  • Clear indication of current page in menu
  • No broken or 404 links

• Pass criteria: Navigation menu is consistent across 100% of pages checked. Current page is highlighted. All navigation links resolve without error. Report the count of navigation items and pages checked even on pass.

• Fail criteria: Navigation differs between pages, or contains broken links, or lacks current page indication. Having the navigation in only the root layout but overridden in a sub-layout does not count as pass.

• Skip (N/A) when: The site has only one page (single-page app).

• Detail on fail: "Home page menu shows 'Home, About, Contact' but /about page shows 'Home, Services, Contact' — inconsistent" or "Current page is not highlighted in menu navigation"

• Remediation: Create a shared navigation component and use it in your root layout:

  // components/Navigation.tsx
  export function Navigation() {
    return (
      <nav>
        <ul>
          <li><Link href="/">Home</Link></li>
          <li><Link href="/about">About</Link></li>
          <li><Link href="/contact">Contact</Link></li>
        </ul>
      </nav>
    )
  }
  
  // app/layout.tsx
  export default function RootLayout({ children }) {
    return <Navigation />{children}</RootLayout>
  }