# Page structure includes landmarks and navigation
- **Pattern:** `ab-000104` (`accessibility-wcag.perceivable.landmarks`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000104
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000104)
## Why it matters
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.
## Severity rationale
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.
## Remediation
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.
```tsx
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
Skip to main content
{children}
)
}
```
Verify heading levels form a logical outline: one `
` per page, sub-sections as `
`, and so on.
## Detection
- **ID:** `landmarks`
- **Severity:** `high`
- **What to look for:** Enumerate every relevant item. Check layout files for semantic HTML landmarks: ``, `