SEOLZ

Landmark contentinfo is top level

Moderate effort

Found on 4% of audited stores.

Move your footer element (or any element with role="contentinfo") to the top level of the page so it is not nested inside another landmark region.

What it is

Every webpage has structural "landmarks" — special regions like the header, main content area, navigation, and footer — that act like a table of contents for assistive technologies. The `contentinfo` landmark is the technical name for a page's footer: the region that typically contains copyright notices, legal links, and contact info. The WCAG rule `landmark-contentinfo-is-top-level` requires that this footer landmark sits at the outermost level of the page's structure (a direct child of `<body>`), rather than being accidentally wrapped inside another landmark like `<main>`, `<article>`, or `<section>`. When it is nested inside another landmark, screen reader users get a confusing, incorrect picture of your page's structure.

Why it matters

Screen reader users — including people with visual impairments — rely on landmarks to jump directly to key page sections without reading every word. When your footer is buried inside another landmark, screen readers may announce it incorrectly (e.g., "footer inside main"), causing real confusion and navigation errors for blind shoppers. This is a WCAG 2.1 failure (specifically related to Success Criterion 1.3.1 Info and Relationships and 4.1.2 Name, Role, Value), which exposes your store to accessibility legal risk — including ADA and EAA complaints — and can harm your brand reputation. Fixing it is a quick code change that immediately improves the experience for assistive technology users and demonstrates good-faith accessibility compliance.

How to fix it

  1. Inspect your page's HTML source (right-click → 'View Page Source' or use browser DevTools) and locate every `<footer>` element or any element with `role="contentinfo"`.
  2. Check whether that footer/contentinfo element is a direct child of `<body>`, or whether it is nested inside another semantic element such as `<main>`, `<div role="main">`, `<article>`, `<section>`, `<aside>`, or `<nav>`.
  3. If nested, restructure the HTML so the `<footer>` (or `role="contentinfo"` element) closes after — not inside — the surrounding landmark. It should sit at the same level as `<header>`, `<main>`, and `<nav>` in the document outline.
  4. If your theme or page builder wraps everything (including the footer) in a single container `<div>`, that wrapper `<div>` itself must NOT carry a landmark role (e.g., `role="main"` or `role="document"`). A plain, non-semantic `<div>` wrapper is acceptable.
  5. After making the change, re-validate using a browser accessibility tool (e.g., axe DevTools browser extension or Chrome Lighthouse) to confirm the `landmark-contentinfo-is-top-level` rule now passes.
  6. Also verify visually that your footer still looks correct — this is a structural HTML change and should not affect styling, but confirm with a quick visual check.
<footer>
  <!-- ✅ CORRECT: <footer> is a direct child of <body>, 
       at the same level as <header> and <main> -->
  <p>© 2024 My Store. All rights reserved.</p>
</footer>

<!-- ❌ INCORRECT: <footer> nested inside <main> -->
<main>
  <p>Page content here...</p>
  <footer> <!-- This fails landmark-contentinfo-is-top-level -->
    <p>© 2024 My Store.</p>
  </footer>
</main>

Fix it on your platform

Pick your platform for the exact steps.

How to fix landmark contentinfo is top level on Shopify
  1. In your Shopify admin, go to Online Store → Themes → click 'Edit code' on your active theme.
  2. Open the file `layout/theme.liquid` — this is the master page template that wraps all pages.
  3. Locate the `<footer>` tag (or any element with `role="contentinfo"`). Check what HTML elements wrap it. It should be a direct child of `<body>` (or at most inside a plain, role-free `<div>` wrapper).
  4. If the footer is inside a `<main>` tag or a `<div role="main">` or similar landmark, cut the entire footer block (from its opening tag to its closing tag) and paste it outside/after the closing tag of that landmark element.
  5. Click 'Save'. Preview your theme and run axe DevTools in your browser to verify the fix.
  6. If your footer is in a separate snippet (e.g., `snippets/footer.liquid`), the fix is the same — move where that snippet is *included* in `theme.liquid`, not the snippet file itself.
Full Shopify guide →Official Shopify docs ↗
How to fix landmark contentinfo is top level on Shopify Plus
  1. Follow the same steps as Shopify above — edit `layout/theme.liquid` via Online Store → Themes → Edit code.
  2. On Shopify Plus, if you use custom checkout pages, also check `layout/checkout.liquid` and apply the same structural fix if a footer/contentinfo landmark exists there.
  3. Use the Shopify Theme Inspector or axe DevTools browser extension to verify after saving.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix landmark contentinfo is top level on WooCommerce
  1. In your WordPress admin, go to Appearance → Theme File Editor (or use a code editor / FTP).
  2. Open your active theme's `footer.php` file. The `<footer>` tag here is typically already outside `<main>` if the theme is well-structured, but confirm.
  3. Also open `header.php` and any template files (e.g., `index.php`, `page.php`, `single.php`) to see how `get_header()`, `get_main()`, and `get_footer()` are ordered — `get_footer()` must always come after the closing `</main>` tag.
  4. If your theme wraps the footer inside a `<main>` or `<article>` in a template file, move the `get_footer()` call (or the `<footer>` block) to appear after the `</main>` closing tag.
  5. Save the file. Use axe DevTools in your browser to confirm the landmark is now top-level.
  6. If using a block theme (Full Site Editing), go to Appearance → Editor → Templates → edit the relevant template, and drag the Footer block outside any Group block that has a 'Main' or other landmark role assigned in block settings.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix landmark contentinfo is top level on BigCommerce
  1. In your BigCommerce admin, go to Storefront → My Themes → click 'Advanced' → 'Edit Theme Files' on your active theme (Stencil-based themes).
  2. Navigate to `templates/layout/base.html` — this is the master layout wrapping all pages.
  3. Locate the `{{> components/common/footer}}` include (or the `<footer>` block directly). Confirm it appears after the closing `</main>` tag and is NOT inside any other landmark element.
  4. If it is nested inside a `<main>` or landmark `<div>`, move the footer include to appear after `</main>` at the top level.
  5. Save and push the theme. Use axe DevTools to validate.
  6. If you cannot access theme files directly (hosted theme), contact your theme developer or use BigCommerce's 'Download' theme option to edit locally and re-upload.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix landmark contentinfo is top level on Wix
  1. Wix renders its footer as a separate, platform-managed section that is always appended after page content — you cannot arbitrarily nest it inside another section via the standard editor.
  2. Open the Wix Editor. If you see a custom footer section nested visually inside a content strip, select it and use 'Arrange' or 'Layers' panel to move it outside any content box or container.
  3. For Wix Studio users: open the Layers panel, find the Footer component, and ensure it is not a child element inside a container that carries a semantic role. Drag it to the root level of the page structure.
  4. If using custom code via Velo (Wix's dev platform), inspect any `$w` components or iframes you may have injected that contain a `<footer>` or `role="contentinfo"` — restructure that injected HTML accordingly.
  5. Preview the page and run axe DevTools to confirm. Note: standard Wix footer placement is typically already top-level; this issue usually arises from custom code or third-party widgets.
Full Wix guide →Official Wix docs ↗
How to fix landmark contentinfo is top level on Wix Studio
  1. Open Wix Studio editor and open the Layers panel (left sidebar).
  2. Locate the Footer section in the layer hierarchy. It should appear at the root level, not indented as a child of any Section or Container.
  3. If it is nested, drag it out of the container to the root level in the Layers panel.
  4. If you have injected custom HTML via an Embed Code element that includes a `<footer>` or `role="contentinfo"`, click that element, open the code, and restructure so the footer is not wrapped inside another landmark element in your custom markup.
  5. Publish and verify with axe DevTools.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix landmark contentinfo is top level on Squarespace
  1. Squarespace manages its global footer as a top-level page region — it is automatically rendered outside the main content area in standard templates.
  2. If you have injected custom HTML (via Settings → Advanced → Code Injection → Footer, or via a Code Block on a page) that includes a `<footer>` tag or `role="contentinfo"` element, edit that code to ensure it does not wrap a footer/contentinfo element inside another landmark.
  3. Go to Pages → select a page → click on any Code Block that might contain footer-like HTML; remove or restructure any nested `<footer>` or `role="contentinfo"` from within `<main>` or `<article>` wrappers.
  4. For Squarespace Developer Platform (custom templates): edit your `base.html` or equivalent layout template via the template files, and ensure `{squarespace-footers}` or your custom `<footer>` is a sibling of `<main>`, not a child.
  5. Preview and validate with axe DevTools.
Full Squarespace guide →Official Squarespace docs ↗
How to fix landmark contentinfo is top level on Webflow
  1. Open your Webflow project in the Designer. In the Navigator panel (left sidebar), expand the page structure.
  2. Locate the Footer element (or any element you have tagged with the 'Footer' HTML tag or `role="contentinfo"`). It should appear at the root level of the page — a sibling of the Navbar, Main, and Section elements, NOT nested inside any of them.
  3. If the Footer element is nested inside a Main element or a Section/Container with a landmark role, drag it in the Navigator to be a direct child of the Body.
  4. If you added a custom attribute `role="contentinfo"` to a div that is inside another landmark, either remove that attribute or move the element out to the top level.
  5. Publish the site and validate with axe DevTools in your browser.
Full Webflow guide →Official Webflow docs ↗
How to fix landmark contentinfo is top level on Adobe Commerce (Magento)
  1. In your Magento admin, go to Content → Design → Configuration → edit your active theme → HTML Head / Footer settings to inspect global footer markup.
  2. For theme-level fixes, locate your theme's `Magento_Theme/templates/html/footer.phtml` (or the equivalent file in your custom theme directory under `app/design/frontend/<Vendor>/<Theme>/`).
  3. Open your layout XML file — typically `Magento_Theme/layout/default.xml` — and confirm the `<footer>` block is declared as a direct child of `<body>`, not inside the `<main>` block.
  4. If the footer block is assigned as a child of `main` in the layout XML, move its `<referenceBlock>` declaration so it references `root` or the body-level container instead.
  5. Clear the Magento cache (System → Cache Management → Flush Cache Storage) and validate with axe DevTools.
  6. If using Page Builder, inspect the generated HTML in the browser and adjust the Page Builder layout to ensure the Footer row/section is outside the Main Content container.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix landmark contentinfo is top level on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the template and layout XML file locations and approach are identical for Magento Open Source.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix landmark contentinfo is top level on PrestaShop
  1. In your PrestaShop admin, go to Design → Theme & Logo → select your active theme → click 'Configure'.
  2. Via FTP or your hosting file manager, navigate to `themes/<your-theme>/templates/_partials/footer.tpl` (or `footer.tpl` in the root templates folder).
  3. Open the file and check that the `<footer>` tag is not wrapped inside another landmark element within this file.
  4. Also check `themes/<your-theme>/templates/layouts/layout-full-width.tpl` (and other layout files) to confirm that the `{block name='footer'}` include appears after the closing `</main>` tag, not inside it.
  5. Save changes, clear the PrestaShop cache (Advanced Parameters → Performance → Clear Cache), and validate with axe DevTools.
Full PrestaShop guide →Official PrestaShop docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find landmark contentinfo is top level — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Landmark contentinfo is top level?

Every webpage has structural "landmarks" — special regions like the header, main content area, navigation, and footer — that act like a table of contents for assistive technologies. The `contentinfo` landmark is the technical name for a page's footer: the region that typically contains copyright notices, legal links, and contact info. The WCAG rule `landmark-contentinfo-is-top-level` requires that this footer landmark sits at the outermost level of the page's structure (a direct child of `<body>`), rather than being accidentally wrapped inside another landmark like `<main>`, `<article>`, or `<section>`. When it is nested inside another landmark, screen reader users get a confusing, incorrect picture of your page's structure.

Why does landmark contentinfo is top level matter?

Screen reader users — including people with visual impairments — rely on landmarks to jump directly to key page sections without reading every word. When your footer is buried inside another landmark, screen readers may announce it incorrectly (e.g., "footer inside main"), causing real confusion and navigation errors for blind shoppers. This is a WCAG 2.1 failure (specifically related to Success Criterion 1.3.1 Info and Relationships and 4.1.2 Name, Role, Value), which exposes your store to accessibility legal risk — including ADA and EAA complaints — and can harm your brand reputation. Fixing it is a quick code change that immediately improves the experience for assistive technology users and demonstrates good-faith accessibility compliance.

How do I fix landmark contentinfo is top level?

Move your footer element (or any element with role="contentinfo") to the top level of the page so it is not nested inside another landmark region.

Authoritative references

Related Accessibility (WCAG) issues