Page includes landmark regions for navigation

A page composed entirely of <div> wrappers presents a flat, unnavigable structure to screen reader users. Screen readers expose a landmark navigation menu (typically via a key like R or a rotor gesture) that lets users jump directly to main content, skip the navigation, or jump to the footer — but only when semantic landmark elements exist. Without them, keyboard-only users must Tab through every navigation link on every page load before reaching content. WCAG 2.2 SC 2.4.1 (Bypass Blocks) and SC 1.3.6 (Identify Purpose) are both violated. Section 508 2018 Refresh 502.3.5 requires programmatic determination of page structure. This affects all keyboard users, not just screen reader users: poor landmark structure also breaks browser reader mode and assistive browser extensions.

Replace <div> wrappers with semantic HTML5 landmark elements in your root layout file (src/app/layout.tsx for Next.js App Router):

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>
          <a href="#main-content" className="skip-link">Skip to main content</a>
          <Logo />
          <nav aria-label="Main navigation">
            <NavLinks />
          </nav>
        </header>
        <main id="main-content">{children}</main>
        <aside aria-label="Related content">
          <Sidebar />
        </aside>
        <footer>
          <FooterLinks />
        </footer>
      </body>
    </html>
  );
}

The minimum required set is <header>, <nav>, and <main>. role="banner", role="navigation", and role="main" are acceptable ARIA equivalents when HTML5 elements cannot be used, but the native elements are preferred.