Accessibility

`a11y/landmarks`

Each page has one main landmark, all content sits inside landmarks, and repeated landmarks of a kind have distinct labels.

moderatebrowserWCAG 1.3.1, 2.4.1 · Afe-a11y-core

Why

Screen reader users jump between landmarks ("main", "navigation", "search") to skip what they do not need. Content outside any landmark is easy to miss; two unnamed navigations sound identical. axe-core reports these as best practices that support 1.3.1 and 2.4.1.

Fix

In the shared layout: <header>, <nav aria-label="Main">, one <main id="main">, <footer>; <aside> for related content; <search> around site search. Label repeated landmarks (aria-label="Main", aria-label="Footer"). Start the main content with the page's h1.

Examples

<header>…<nav aria-label="Main">…</nav></header>
<main id="main"><h1>Orders</h1>…</main>
<footer><nav aria-label="Footer">…</nav></footer>

Sources

Facts

Id: a11y/landmarks
Severity: moderate
Check: browser needs a rendered page: audit --url
Applies to: page
WCAG 2.2: 1.3.1, 2.4.1, level A
Same problem in: axe-core landmark-one-main, axe-core region, axe-core landmark-unique, axe-core page-has-heading-one
Taught by the skill: fe-a11y-core Accessibility, WCAG 2.2 map
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/landmarks