How to fix region on Adobe Commerce (Magento)

Wrap all visible page content inside HTML landmark regions (e.g. `<header>`, `<main>`, `<nav>`, `<footer>`) so screen-reader users can navigate the page by section.

Steps for Adobe Commerce (Magento)

  1. Landmark structure is defined in your theme's layout XML and PHTML templates. Navigate to your custom theme directory: 'app/design/frontend/<Vendor>/<theme>/'.
  2. Open or create 'Magento_Theme/templates/root.phtml' (the global shell). Confirm the page header area uses `<header role='banner'>`, the main content column uses `<main id='maincontent' role='main'>`, the sidebar uses `<aside role='complementary'>`, and the footer uses `<footer role='contentinfo'>`.
  3. Check 'Magento_Theme/layout/default.xml' and any page-specific layout handles to ensure content blocks are assigned to the correct structural containers.
  4. For any blocks rendered via widgets (CMS widgets, promotional banners), ensure the widget template wraps its output in an appropriate landmark or is positioned inside an existing landmark container.
  5. Run 'bin/magento cache:flush' after template changes, then test with axe DevTools on the live or staging site.
Official Adobe Commerce (Magento) documentation ↗

What is region?

Landmark regions are special HTML tags — like `<header>`, `<main>`, `<nav>`, `<aside>`, and `<footer>` — that divide a page into named zones. Screen readers and assistive technologies use these zones as a navigation menu, letting users jump straight to the area they need (e.g. "skip to main content") instead of listening to every element. The WCAG "region" rule fails when any visible content sits outside of all these landmark zones — meaning a portion of your page is effectively invisible to screen-reader navigation.

Approximately 7 million Americans rely on screen readers, and "landmark navigation" is one of the primary ways they move through a web page. When content sits outside landmarks, those users cannot find or reach it at all — a direct barrier that can expose your store to accessibility lawsuits under the ADA (Title III) and similar laws in Canada, the UK, and the EU. Beyond legal risk, accessible stores convert better: removing navigation barriers keeps more users on the page and completing purchases. Google also uses page structure as a quality signal, so a well-structured landmark layout can reinforce your SEO.

See the complete Region guide for every platform and the full background.

Not sure if your Adobe Commerce (Magento) store has this?

Run a free SEOLZ scan — we’ll find region and every other issue across your whole site.

Scan my site free

Fix region on another platform