Region
Moderate effortFound on 83% of audited stores.
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.
What it is
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.
Why it matters
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.
How to fix it
- Audit your page's HTML source and identify any visible content (text, images, buttons, forms, promotional banners) that sits directly inside `<body>` or a generic wrapper `<div>` without being nested inside a landmark element.
- Map your layout to the correct landmark tags: `<header>` for site header/logo/top nav, `<nav>` for navigation menus (use `aria-label` if you have more than one), `<main>` for the primary page content (only one per page), `<aside>` for sidebars or supplementary content, and `<footer>` for site-wide footer information.
- Wrap any orphaned content with the appropriate landmark. If no semantic landmark fits, use `<section aria-label='…'>` or `<div role='region' aria-label='…'>` as a last resort — but prefer native HTML elements.
- Ensure every `<section>` or `role='region'` element has a visible or `aria-label` / `aria-labelledby` name; unnamed sections are ignored by some assistive technologies.
- Re-test using a free tool (axe DevTools browser extension, WAVE, or NVDA + Chrome) to confirm all content is now inside a landmark and no new orphaned content has been introduced.
- Check that no landmark is empty and that the `<main>` landmark contains the page's primary content — not just a wrapper with nothing directly meaningful inside it.
Fix it on your platform
Pick your platform for the exact steps.
How to fix region on Shopify
- From your Shopify admin go to Online Store → Themes → (your active theme) → Actions → Edit code.
- Open 'layout/theme.liquid' — this is the master shell for every page.
- Locate the opening and closing of your page structure. Ensure the site header is wrapped in `<header role='banner'>` (or just `<header>`), the main content area uses `<main id='MainContent'>`, the footer uses `<footer role='contentinfo'>`, and any navigation uses `<nav aria-label='Main'>` (or similar).
- Open any section files under 'sections/' (e.g. 'sections/announcement-bar.liquid', 'sections/header.liquid') and confirm their rendered output lands inside the correct landmark in theme.liquid.
- For promotional banners or custom sections that render outside `<main>` or `<header>`, wrap their content with `<section aria-label='Promotion'>` inside the appropriate landmark.
- Save changes and verify with the axe DevTools browser extension on your storefront.
How to fix region on Shopify Plus
- Follow the same steps as Shopify above — Shopify Plus uses the same theme architecture.
- If you have a custom checkout (Checkout Extensibility), edit your checkout UI extensions and ensure any custom content blocks are rendered within landmark-appropriate containers provided by Shopify's checkout components.
- For headless storefronts built on Shopify Storefront API, apply the landmark structure directly in your front-end framework templates (see the Headless / Custom entry below).
How to fix region on WooCommerce
- Landmark structure is controlled by your active WordPress theme. In your WordPress admin go to Appearance → Theme File Editor (or use a local FTP/SSH connection for child themes).
- Open 'header.php' — wrap the site header and nav output in `<header role='banner'>` and `<nav aria-label='Primary'>` respectively if not already present.
- Open 'footer.php' — ensure all footer content is inside `<footer role='contentinfo'>`.
- Open 'page.php', 'single.php', 'archive.php', and 'index.php' — confirm the main loop is wrapped in `<main id='main' role='main'>`.
- If using a block theme (WordPress 6+), edit templates via Appearance → Editor (Site Editor). Select the template part (Header, Footer, etc.) and use the Group block with its HTML element set to the correct semantic tag (header, main, footer) in the block settings sidebar.
- Install the free 'WP Accessibility' plugin (by Joe Dolson) for quick fixes like adding a skip-link and ensuring the main content is correctly identified; install 'Equalize Digital Accessibility Checker' to scan for remaining issues.
How to fix region on BigCommerce
- In your BigCommerce admin go to Storefront → My Themes → (active theme) → Advanced → Edit Theme Files.
- Open 'templates/layout/base.html' (Cornerstone theme) — this is the global shell.
- Ensure the site header markup is inside `<header role='banner'>`, the main page content area is inside `<main id='main-content'>`, and the footer is inside `<footer role='contentinfo'>`.
- Open 'templates/components/common/header.html' and 'templates/components/common/navigation.html' — confirm navigation is wrapped in `<nav aria-label='Main navigation'>`.
- Check 'templates/pages/' for individual page templates (category.html, product.html, etc.) to ensure content does not render outside the `<main>` block.
- Use the axe browser extension to test your live storefront and iterate until all content is inside landmarks.
How to fix region on Wix
- Wix generates its own HTML, so direct landmark editing is limited. Start by using Wix's built-in accessibility tools: in the Editor, open the Accessibility Wizard (? icon → Accessibility Wizard) and follow its guided steps.
- For sections added via the Wix Editor, ensure every significant section has a meaningful name: select the section → click the Settings (gear) icon → set a Section Title. Wix uses this to generate accessible labels on landmarks.
- Avoid leaving freeform text boxes, images, or buttons floating outside a named Section container — group all content into Sections.
- For custom HTML embedded via the 'HTML iframe' / Embed Code widget, write proper landmark HTML inside that embed.
- Test with WAVE or axe in your browser on the published site; any outstanding orphaned content may require using Wix's 'Dev Mode' (Velo) to inject ARIA attributes via code.
How to fix region on Wix Studio
- In Wix Studio, each canvas Section is mapped to a landmark. Open the Studio Editor and ensure all visible content blocks (text, images, buttons) are placed inside a Section rather than outside all sections at the body level.
- Select any Section → open the Inspector panel → give the section a descriptive 'Aria Label' so it is announced correctly by screen readers.
- Use the Accessibility panel (Help → Accessibility Checker) to detect any remaining orphaned content.
- For custom-coded panels or components (using Velo/Dev Mode), manually add `role` and `aria-label` attributes in your JavaScript or HTML component code.
How to fix region on Squarespace
- Squarespace renders its own landmark structure — the global header, footer, and page sections are automatically wrapped in semantic elements in most modern templates (7.1). Open your live site and run the axe extension to confirm which specific content is orphaned.
- In the Pages panel, if you are using 'Page Sections' (7.1 fluid engine), ensure all content blocks are placed inside a Section — do not use the 'Page Header' injection points for content that belongs in the body.
- Go to Settings → Advanced → Code Injection (available on Business plan and above). If you have injected raw HTML in the Header or Footer injection fields, ensure that injected content is wrapped with the correct landmark tags (e.g., `<div role='region' aria-label='Announcement'>` as a minimum).
- For content inside Custom Code blocks on a page, wrap the HTML in the appropriate landmark before pasting.
- Use Squarespace's 'Page Settings → SEO' description and title fields properly — these also improve overall page structure signals.
How to fix region on Webflow
- In the Webflow Designer, open the Navigator panel (the layers view) for the page you want to fix.
- Select the outermost wrapper for your site header. In the Element Settings panel (D key), change the HTML tag from 'div' to 'header'. If you have more than one nav, add a custom attribute: 'aria-label' → 'Main navigation' on the `<nav>` element.
- Select your main content area wrapper and change its tag to 'main'. Ensure there is only one `<main>` per page.
- Select your footer wrapper and change its tag to 'footer'.
- For any Section (`<section>`) elements, add a custom attribute 'aria-label' with a descriptive value (e.g., 'Featured products') in the Element Settings panel.
- Publish the site and verify with the axe DevTools extension. Repeat for any CMS-template pages by editing the Collection Template.
How to fix region on Adobe Commerce (Magento)
- Landmark structure is defined in your theme's layout XML and PHTML templates. Navigate to your custom theme directory: 'app/design/frontend/<Vendor>/<theme>/'.
- 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'>`.
- Check 'Magento_Theme/layout/default.xml' and any page-specific layout handles to ensure content blocks are assigned to the correct structural containers.
- 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.
- Run 'bin/magento cache:flush' after template changes, then test with axe DevTools on the live or staging site.
How to fix region on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the theme and template architecture is identical.
- If you are on an older Magento 2 version without a heavily customized theme, check that the default Luma or Blank theme's 'root.phtml' already includes landmark tags; if you have overridden it without them, add them as described above.
How to fix region on Headless / Custom (I build in code)
- In your front-end framework (React, Vue, Next.js, Nuxt, Astro, etc.), identify your global layout component (e.g., 'Layout.jsx', 'DefaultLayout.vue', '_app.tsx').
- Replace generic `<div>` wrappers with the correct semantic HTML elements: `<header>` for the site header, `<nav aria-label='Main'>` for primary navigation, `<main>` for the primary content area, `<aside>` for sidebars, `<footer>` for the site footer.
- For any secondary navigation (breadcrumbs, pagination, footer links), use additional `<nav>` elements each with a unique `aria-label` to distinguish them.
- Ensure every `<section>` element has an accessible name via `aria-labelledby` pointing to a heading inside it, or `aria-label` if no heading is present.
- Run automated checks in CI using axe-core (npm package 'axe-core' or '@axe-core/react') to catch regressions before deployment.
How to fix region on PrestaShop
- Edit your active theme's template files located in 'themes/<your-theme>/templates/'. Open '_partials/header.tpl' and ensure the header output is wrapped in `<header role='banner'>` and nav in `<nav aria-label='Main navigation'>`.
- Open '_partials/footer.tpl' and wrap all footer content in `<footer role='contentinfo'>`.
- Open 'index.tpl', 'catalog/product.tpl', and 'catalog/listing/product-list.tpl' — confirm the primary content is inside `<main id='main' role='main'>`.
- Clear the PrestaShop cache from Advanced Parameters → Performance → Clear cache, then test with the axe extension.
How to fix region on Ghost
- Edit your active Ghost theme (downloaded as a zip, edited locally, re-uploaded). Open 'default.hbs' — the root layout.
- Wrap the site header partial with `<header role='banner'>`, the main content area with `<main>`, and the footer with `<footer role='contentinfo'>`.
- Re-zip the theme folder and upload it via Ghost Admin → Settings → Design → Upload theme.
- Verify on the live site with the axe browser extension.
Does your site have this issue?
Run a free SEOLZ scan to find region — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does region matter?
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.
How do I fix region?
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.