Provide landmark regions for major page areas
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Landmarks like banner, navigation, and main allow screen reader users to jump directly to key sections without reading everything linearly.
How to fix this issue
Add appropriate landmark roles or semantic elements such as <header>, <nav>, <main>, <aside>, and <footer>.
Developer guidance
Do not duplicate landmarks — e.g., avoid multiple <main> tags. Always include at least one <main> element per page.
Code examples
Incorrect Implementation
<div id='header'>...</div>Correct Implementation
<header role='banner'>...</header>
Trusted by organizations across Europe working toward WCAG and EAA conformance