Skip to Main Content link is present and functional

Without a skip link, a keyboard user visiting a page with a navigation menu of 30 items must press Tab 30 times before reaching the main content — on every single page load. This is not a theoretical concern; it is a documented and cited reason why keyboard users abandon websites. WCAG 2.2 SC 2.4.1 (Bypass Blocks) specifically requires a mechanism to skip repeated blocks of content. Section 508 2018 Refresh 302.1 requires a clear path to primary functionality. The skip link requirement applies regardless of whether your navigation is long or short — it is a baseline expectation for any multi-page site. SPA route transitions that re-render navigation without a skip link create the same problem on every virtual page navigation.

Add a skip link as the first focusable element in your root layout. It should be hidden by default and visible on focus. In Next.js App Router, edit src/app/layout.tsx:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <a
          href="#main-content"
          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded"
        >
          Skip to main content
        </a>
        <Header />
        <main id="main-content">{children}</main>
        <Footer />
      </body>
    </html>
  );
}

In plain CSS, if not using Tailwind:

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
}

.skip-link:focus {
  top: 1rem;
  background: #0066cc;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
}

Ensure id="main-content" exists on the <main> element; without it, the anchor href target is broken.