Tab key navigates to all interactive elements; no keyboard traps; skip links present if more than 4 nav links

When a page has many navigation links, every keyboard user must tab through all of them before reaching main content—on every page load. For users with motor disabilities this is fatiguing; for screen reader users it is repetitive and disorienting. Skip links solve this with a single Tab press from the top of the page. WCAG 2.2 SC 2.4.1 (Level A) requires a bypass mechanism when blocks of content are repeated across pages. SC 2.1.2 (Level A) prohibits keyboard traps that prevent users from leaving a component. Section 508 2018 Refresh 503.3.3 covers both. Navigation-heavy sites with no skip link fail their most basic keyboard-user obligation.

Add a skip link as the first focusable element in app/layout.tsx, targeting the <main> element by id:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <a href="#main-content" className="skip-link">
          Skip to main content
        </a>
        <Header />
        <main id="main-content">{children}</main>
        <Footer />
      </body>
    </html>
  );
}

Style it hidden by default, visible on focus:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;
}

For modal dialogs, ensure Escape closes the modal and returns focus to the trigger element.