Rule library Keyboard and focus

All page content should be contained by landmarks

regionBest practice

Ensure all page content is contained by landmarks

Who this affects

Content sits outside any landmark region, so users cannot jump between sections of the page.

How to fix it

Wrap content in <main>, <nav>, <header> and <footer> landmarks.

Effort Medium · ~1-2 h per template

Before and after

Fails

<body>
  <div class="hero">…</div>
  <div class="content">…</div>

Passes

<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>

How to check it by hand

Put the mouse down. Tab from the top of the page to the bottom. Every interactive element must be reachable, must show a visible focus indicator, and you must be able to tab back out of anything you tab into.

Automated testing settles roughly a third of the WCAG success criteria. This rule is one an automated tool detects reliably — but a clean automated result is not proof of conformance.

Reference

Deque's technical write-up for this rule: region

See whether your site trips this rule

Paste a URL. We open it in a real browser, dismiss the cookie wall and run the full EN 301 549 rule set. No account, no card.

Run a free scan All rules