Skip to content
Accessible Cart

Fixing “Lists do not contain only <li> elements” in Shopify menus and footers

A structural error in menus and footer blocks. Screen readers can no longer announce how many items a menu has.

Found on 8.3% of 3,151 Shopify homepages we tested in our 2026 study.

What the message means

A <ul> or <ol> may only contain <li> elements directly. When a theme or mega-menu app puts a <div> between the list and its items, screen readers lose the list structure.

How to fix it

Move wrapper elements inside the <li>, not around it:

<!-- before -->
<ul class="footer-block__list">
  <div class="footer-block__item">
    <li><a href="/pages/shipping">Shipping</a></li>
  </div>
</ul>

<!-- after -->
<ul class="footer-block__list">
  <li class="footer-block__item"><a href="/pages/shipping">Shipping</a></li>
</ul>

Mega-menu apps

If the menu markup comes from an app, the fix belongs in the app's template or settings. Note which app it is before editing theme files.

More guides