Page structure includes landmarks and navigation

Without semantic landmarks and a skip link, keyboard and screen reader users must navigate through the entire navigation on every page load to reach main content. WCAG 2.2 SC 2.4.1 (Bypass Blocks) is a Level A requirement. SC 1.3.1 (Info and Relationships) requires that document structure — headers, navigation, main content — is conveyed in markup, not just visually. A layout built entirely of divs gives screen reader users no way to orient themselves or jump between sections.

Restructure your root layout with semantic HTML landmarks and a skip-to-main link. The skip link should be visible on focus so keyboard users can see and use it.

// 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:fixed focus:top-4 focus:left-4 focus:z-50 focus:bg-white focus:px-4 focus:py-2 focus:rounded"
        >
          Skip to main content
        </a>
        <header>
          <nav aria-label="Primary">{/* nav links */}</nav>
        </header>
        <main id="main-content">{children}</main>
        <footer>{/* footer */}</footer>
      </body>
    </html>
  )
}

Verify heading levels form a logical outline: one <h1> per page, sub-sections as <h2>, and so on.