How to fix landmark contentinfo is top level on WooCommerce

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.

Steps for 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.
Official WooCommerce documentation ↗
<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>

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.

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.

See the complete Landmark contentinfo is top level guide for every platform and the full background.

Not sure if your WooCommerce store has this?

Run a free SEOLZ audit — we’ll find landmark contentinfo is top level and every other issue across your whole site.

Scan my site free

Fix landmark contentinfo is top level on another platform