A page should expose its header, footer and navigation as landmarks

Rule landmark-regions-present · Structure & semantics · impact minor · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Landmarks are how screen-reader users move around a page without reading it: one keystroke to the navigation, one to the footer. A page that wraps its header and menu in plain <div>s offers no such shortcuts — the only way to reach anything is to read from the top. Because this page already uses a main landmark, the remaining regions are worth naming too.

How to fix#

Wrap the site header in <header>, the footer in <footer> and each menu in <nav>. Where the element cannot change, add role="banner", role="contentinfo" or role="navigation".

Example#

<div class="header">Logo</div><div class="menu"><a href="/a">A</a></div><main>Text</main>

<header>Logo</header><nav><a href="/a">A</a></nav><main>Text</main><footer>© Acme</footer>

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• ARIA APG — Landmarks