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.
High because missing landmark regions force keyboard users to tab through all navigation on every page, significantly degrading usability even if no absolute barrier exists.
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.
ID: accessibility-basics.semantic-structure-aria.landmark-regions
Severity: high
What to look for: Enumerate every relevant item. Check for semantic landmark elements: <header>, <nav>, <main>, <aside>, and <footer>. These allow screen reader users to jump between major page sections. Look in your root layout and page components.
Pass criteria: At least 1 of the following conditions is met. The page includes at least <header>, <nav>, and <main> elements, or equivalent ARIA roles (role="banner", role="navigation", role="main").
Fail criteria: The page structure uses only <div> elements with no landmark regions, or lacks a <main> or role="main".
Do NOT pass when: The item exists only as a placeholder, stub, or TODO comment — partial implementation does not count as passing.
Skip (N/A) when: Never — all web pages benefit from landmark regions.
Cross-reference: For broader data handling practices, the Data Protection audit covers data lifecycle management.
Detail on fail: Describe what's missing. Example: "Root layout uses only <div> wrappers. No <main>, <nav>, or <header> elements found."
Remediation: Replace generic <div> wrappers with semantic landmark elements:
<header><h1>YourSite</h1></header>
<nav>{navigationLinks}</nav>
<main>{children}</main>
<footer>...</footer>