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.
High because missing landmarks and skip links force screen reader users to tab through every nav link on every page load, a severe usability barrier that violates WCAG 2.2 SC 2.4.1 Level A.
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.
ID: accessibility-wcag.perceivable.landmarks
Severity: high
What to look for: Enumerate every relevant item. Check layout files for semantic HTML landmarks: <header>, <nav>, <main>, <aside>, <footer>. Look for "Skip to main content" link (usually hidden, revealed on focus). Verify headings form a logical outline of the page.
Pass criteria: At least 1 of the following conditions is met. Pages use semantic landmarks. A "Skip to main content" link is present and functional (keyboard-accessible, moves focus to <main>). Heading hierarchy creates a navigable outline.
Fail criteria: No landmarks used; page is all <div> wrappers. No skip link present. Skip link is non-functional or not keyboard-accessible.
Skip (N/A) when: Never — landmarks apply to all web pages.
Detail on fail: Example: "Layout uses only <div> elements; no <main>, <nav>, <header>, or <footer>. No skip-to-main link found"
Remediation: Structure your layout with semantic elements:
export default function Layout({ children }) {
return (
<html lang="en">
<body>
<a href="#main" className="sr-only focus:not-sr-only">
Skip to main content
</a>
<header>
<nav>Navigation...</nav>
</header>
<main id="main">{children}</main>
<footer>Footer...</footer>
</body>
</html>
)
}