Landmark contentinfo is top level
Quick winFound on 9% of audited stores.
Move your site's footer element (or role="contentinfo") so it is a direct child of the page body, not nested inside another landmark region.
What it is
Every webpage typically has a footer that contains things like copyright notices, contact links, and legal disclaimers. In HTML, the `<footer>` tag (or any element with `role="contentinfo"`) is a special navigation landmark that screen readers use to help users jump directly to site-wide footer content. The WCAG rule `landmark-contentinfo-is-top-level` means that this footer landmark must sit at the top level of the page — a direct child of `<body>` — rather than being wrapped inside another landmark element like `<main>`, `<header>`, `<section>`, or `<article>`. When your footer is nested inside another landmark, screen readers get confused about the page's structure and may not correctly announce or navigate to the footer.
Why it matters
Screen reader users — including many people with visual impairments or motor disabilities — rely on landmark regions to skip around a page efficiently, much like sighted users scan headings visually. When your `contentinfo` (footer) landmark is buried inside another landmark, assistive technologies either skip it or mis-announce it, making your site harder or impossible to navigate for these users. This is a WCAG 2.1 failure (Success Criterion 1.3.6 / best practice under 4.1.2), meaning your store may face legal accessibility risk under laws like the ADA (USA), EAA (EU), or AODA (Canada). Fixing it also signals high HTML quality to search engines, which increasingly factor accessibility into crawl quality, and avoids potential legal complaints or demand letters that are increasingly common against ecommerce stores.
How to fix it
- Identify your footer's HTML: open your theme or template file and find the element using the <footer> tag or any element with role="contentinfo".
- Check its parent element. If the parent is <main>, <header>, <section>, <article>, <aside>, <nav>, or any element with a role= landmark attribute, the footer is incorrectly nested.
- Cut the entire <footer>…</footer> block (including all its content) out of the wrapping landmark element.
- Paste the <footer> block as a direct child of <body>, after the closing tag of <main> (or whichever landmark previously contained it).
- Ensure no other landmark element wraps the <footer> at the top level — it should be a sibling of <header>, <nav>, and <main>, all direct children of <body>.
- Validate the fix by running an accessibility checker (e.g. axe DevTools browser extension) and confirming the landmark-contentinfo-is-top-level rule no longer flags an error.
Fix it on your platform
Pick your platform for the exact steps.
How to fix landmark contentinfo is top level on Shopify
- In your Shopify admin, go to Online Store → Themes.
- Click 'Customize' on your active theme, then exit to the code editor: Online Store → Themes → Actions → Edit code.
- In the 'Layout' folder, open 'theme.liquid' (this is the global page wrapper for most themes).
- Search for '<footer' or 'role="contentinfo"'. Check what element wraps it — if it is inside a <main>, <div role="main">, or any other landmark, identify the closing tag of that wrapper.
- Cut the entire <footer>…</footer> block and paste it outside and after the closing </main> tag (or whichever wrapper contained it), so it is a direct sibling of <header> and <main> under <body>.
- Save the file, then preview the theme and run axe DevTools in your browser to confirm the issue is resolved.
How to fix landmark contentinfo is top level on Shopify Plus
- Follow the same steps as Shopify above. In Shopify Plus you may also have a 'checkout.liquid' layout — open it and apply the same footer restructuring there if a <footer> or role="contentinfo" element exists inside a landmark wrapper in that file.
How to fix landmark contentinfo is top level on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a local/staging environment with a code editor for safety).
- Open your active theme's 'footer.php' file.
- Check whether the <footer> tag inside footer.php is wrapped by a parent element that carries a landmark role (e.g. <main>, <div role="main">, <article>). Also check 'page.php' or 'index.php' to see how footer.php is included relative to </main>.
- If </main> closes inside footer.php before the <footer> tag, you are fine. If <footer> appears before </main> closes, move the </main> closing tag to appear before the opening <footer> tag.
- If the theme uses a wrapper div with role="main" or similar around the footer, remove the footer from inside that wrapper.
- Save, then use the axe DevTools browser extension on the frontend to verify the landmark structure is correct.
How to fix landmark contentinfo is top level on BigCommerce
- In your BigCommerce admin, go to Storefront → My Themes → click 'Advanced' → 'Edit Theme Files' for your active theme (Stencil).
- Open 'templates/layout/base.html' (the master layout file).
- Find the <footer> tag. Check whether it is inside a <main> element or any other landmark. In a correctly structured Stencil theme, <footer> should appear after </main>.
- If the <footer> is nested inside <main> or another landmark, cut the entire footer block and paste it after the </main> closing tag, as a direct child of <body>.
- Save and push the theme, then verify with the axe DevTools extension in your browser.
How to fix landmark contentinfo is top level on Wix
- Wix generates its own HTML structure automatically and does not expose the raw <footer> landmark tag for direct editing in the standard editor.
- Open the Wix Editor, click on your Footer section at the bottom of the page.
- Ensure your Footer strip is placed in the designated 'Footer' area of the editor (below all page sections and the body content area) — do not drag footer content strips into the main page body area, as Wix maps the Footer area to the correct landmark.
- If you are using Wix Studio or have custom Velo code that injects HTML with role="contentinfo", open the Velo code panel and ensure any custom footer HTML is not injected inside a <main> or other landmark element.
- After making changes, use the axe DevTools extension to audit the published site and confirm the contentinfo landmark is top-level.
How to fix landmark contentinfo is top level on Wix Studio
- In Wix Studio, open your site and navigate to the page layout.
- Ensure the Footer section is placed in the designated Footer slot of the layout (not embedded inside a Main Content or Section block).
- If you have custom HTML components or Velo-injected markup with role="contentinfo", open the code editor and verify that markup is rendered as a sibling of <main>, not a descendant.
- Publish your site, then run axe DevTools on the live URL to confirm the landmark is top-level.
How to fix landmark contentinfo is top level on Squarespace
- Squarespace manages its HTML output automatically. In most Squarespace templates, the footer is already rendered as a top-level landmark — but custom code injections can break this.
- Go to Website → Pages → scroll to the Footer section and ensure your footer content is placed in the native Footer area, not injected into a page section or content block.
- Check Settings → Advanced → Code Injection (Footer field): if you have custom HTML here that wraps content in a <footer> or role="contentinfo" element, make sure it does not duplicate or nest a footer landmark inside another one.
- If using custom CSS/JavaScript or third-party widgets that inject a second <footer>, remove the duplicate or remove the role from the inner element.
- Use axe DevTools on your live site to verify only one top-level contentinfo landmark exists.
How to fix landmark contentinfo is top level on Webflow
- Open your project in the Webflow Designer.
- In the Navigator panel (left side), find your Footer section/element. Confirm it sits at the root level of the page structure — a direct child of the Body element, not nested inside a Main Wrapper, Section, or any element that has a landmark role.
- If the Footer is nested inside a Main Wrapper or other landmark container: click the Footer element in the Navigator, then drag it out to be a direct child of Body (below the Main Wrapper).
- In Webflow, the built-in 'Footer' element automatically receives the correct semantic role. Ensure you are using the native Footer element type (not a plain Div inside another landmark).
- Publish the site and verify with the axe DevTools browser extension.
How to fix landmark contentinfo is top level on Adobe Commerce (Magento)
- Locate your active theme's layout XML and template files, typically under app/design/frontend/<Vendor>/<Theme>/.
- Open the main page layout XML (e.g. default.xml or cms_index_index.xml) and find the block or container that renders the footer (usually named 'footer' or 'footer_content').
- In the layout XML, confirm the footer container is a child of the root <page> container (or <body> in the layout), not nested inside the 'main' container.
- If the footer block is declared inside the 'main' container, move its XML declaration to be a sibling of 'main', placed after it.
- Open the corresponding .phtml template (e.g. Magento_Theme/templates/html/footer.phtml) and verify the <footer> tag is not wrapped in a <main> or other landmark element within the template itself.
- Flush the Magento cache (bin/magento cache:flush), reload the storefront, and verify with axe DevTools.
How to fix landmark contentinfo is top level on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above, applying changes to your custom theme files under app/design/frontend/.
- After editing layout XML and/or .phtml templates, run bin/magento cache:flush and verify the landmark structure with the axe DevTools browser extension.
How to fix landmark contentinfo is top level on PrestaShop
- In your PrestaShop admin, go to Design → Theme & Logo → select your active theme → click 'Configure'.
- Via FTP or your hosting file manager, navigate to `themes/<your-theme>/templates/_partials/footer.tpl` (or `footer.tpl` in the root templates folder).
- Open the file and check that the `<footer>` tag is not wrapped inside another landmark element within this file.
- 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.
- Save changes, clear the PrestaShop cache (Advanced Parameters → Performance → Clear Cache), and validate with axe DevTools.
Does your site have this issue?
Run a free SEOLZ scan to find landmark contentinfo is top level — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Landmark contentinfo is top level?
Every webpage typically has a footer that contains things like copyright notices, contact links, and legal disclaimers. In HTML, the `<footer>` tag (or any element with `role="contentinfo"`) is a special navigation landmark that screen readers use to help users jump directly to site-wide footer content. The WCAG rule `landmark-contentinfo-is-top-level` means that this footer landmark must sit at the top level of the page — a direct child of `<body>` — rather than being wrapped inside another landmark element like `<main>`, `<header>`, `<section>`, or `<article>`. When your footer is nested inside another landmark, screen readers get confused about the page's structure and may not correctly announce or navigate to the footer.
Why does landmark contentinfo is top level matter?
Screen reader users — including many people with visual impairments or motor disabilities — rely on landmark regions to skip around a page efficiently, much like sighted users scan headings visually. When your `contentinfo` (footer) landmark is buried inside another landmark, assistive technologies either skip it or mis-announce it, making your site harder or impossible to navigate for these users. This is a WCAG 2.1 failure (Success Criterion 1.3.6 / best practice under 4.1.2), meaning your store may face legal accessibility risk under laws like the ADA (USA), EAA (EU), or AODA (Canada). Fixing it also signals high HTML quality to search engines, which increasingly factor accessibility into crawl quality, and avoids potential legal complaints or demand letters that are increasingly common against ecommerce stores.
How do I fix landmark contentinfo is top level?
Move your site's footer element (or role="contentinfo") so it is a direct child of the page body, not nested inside another landmark region.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN