Region

What it is

Landmarks are special HTML tags or ARIA attributes that divide a web page into named regions — like the main content area, navigation menu, page header, and footer. Screen readers and other assistive technologies use these regions as a table of contents, letting users jump directly to the part of the page they need. When content sits outside any landmark, assistive technology users cannot locate or skip to it. This is what the "region" accessibility rule checks: it flags any significant block of content that is not wrapped in one of these landmark containers.

Why it matters

Approximately 7 million Americans use screen readers, and landmarks are one of the most fundamental navigation tools they rely on. Without them, a screen-reader user must listen to your entire page linearly just to find the product listing or checkout button — a frustrating experience that causes them to leave. Beyond lost sales, WCAG 2.1 Success Criterion 1.3.6 (and the broader WCAG framework) requires content to be programmatically determinable; failure exposes your store to ADA/Section 508 accessibility complaints and litigation, which are rising year-on-year in the US and EU (EAA 2025). Search engines also use landmark structure to understand page hierarchy, so fixing this can modestly reinforce your on-page SEO signals as well.

How to fix it

1. Audit your page: run an accessibility scanner (axe DevTools, WAVE, or Lighthouse) to identify exactly which content blocks are outside landmarks.
2. Map every content block to the correct HTML5 semantic element: use `<header>` for the site banner/logo, `<nav>` for navigation menus, `<main>` for the primary content (there should be exactly one per page), `<aside>` for sidebars or supplementary content, and `<footer>` for the page footer.
3. If you cannot change the element tag (e.g. a `<div>` forced by your theme), add the equivalent ARIA role attribute: `role="main"`, `role="navigation"`, `role="banner"`, `role="contentinfo"`, `role="complementary"`, or `role="region"` with a descriptive `aria-label` (e.g. `<div role="region" aria-label="Customer Reviews">`).
4. When you have more than one landmark of the same type on a page (e.g. two `<nav>` elements), give each a unique `aria-label` so users know which is which (e.g. `<nav aria-label="Main menu">` and `<nav aria-label="Breadcrumb">`).
5. Ensure every piece of visible body content — promotional banners, product grids, announcement bars, trust badges, newsletter sign-ups — falls inside at least one landmark.
6. Re-run your accessibility scanner to confirm zero 'region' violations remain, then test with a real screen reader (NVDA + Firefox on Windows, VoiceOver + Safari on Mac/iOS) by using the screen reader's landmark-jump shortcut to navigate the fixed page.

<header role="banner">
  <nav aria-label="Main menu"><!-- navigation links --></nav>
</header>

<main id="main-content" role="main">
  <!-- all primary page content goes here -->
</main>

<aside role="complementary" aria-label="Promotions">
  <!-- sidebar or supplementary content -->
</aside>

<footer role="contentinfo">
  <!-- footer links and legal text -->
</footer>

<!-- If a div cannot become a semantic element: -->
<div role="region" aria-label="Customer Reviews">
  <!-- review content -->
</div>

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• Web accessibility tutorials — W3C WAI
• ARIA basics — MDN