Skip to main content
Accessibility Pro
Startscanning

Fix guides · WCAG 2.2

Putting page content inside landmarks

Best practice · no WCAG success criterion

Landmarks, such as header, nav, main and footer, let screen reader users jump straight to a region of the page. Content that sits outside every landmark, like the promotional banner in the sample, can be skipped by someone moving from landmark to landmark.

Who this affects: People who navigate by landmarks with a screen reader.

The failing markup

<div class="promo">
  <p>Free delivery on orders over 50 euros.</p>
</div>
<main id="main">
  <h1>Home</h1>
  <p>Welcome back.</p>
</main>

How to fix it

  1. Place every piece of content in a landmark: the site banner and navigation in <header>, the page content in <main>, secondary content in <aside>, and the rest in <footer>.
  2. Give landmarks of the same type distinct labels, for example two <nav> elements with aria-label="Main" and aria-label="Footer".

The change

Removed: <div class="promo">Added: <header class="promo">  <p>Free delivery on orders over 50 euros.</p>Removed: </div>Added: </header><main id="main">  <h1>Home</h1>  <p>Welcome back.</p></main>

Verified by the scanner

On 2026-09-13 both versions of this sample were run through Accessibility Pro's scan pipeline with arc-style, axe-core, ibm-equal-access, pa11y, focus-graph. The failing markup was reported as:

  • axe-core: region, best practice

The fixed markup produced no findings at all. To run the same check on every pull request, use the accessibility GitHub Action; how accurate the scanner is overall is in the published benchmark.

Worth knowing

  • This is a best practice rather than a WCAG success criterion: axe-core reports it as region, with no criterion attached, and it never fails a build on its own. It supports 1.3.1 and 2.4.1, which is why the scanner still reports it.