How to fix listitem on Shopify

Steps for Shopify

1. In your Shopify admin go to Online Store → Themes → click the three-dot menu beside your active theme → Edit code.
2. Use the search box (or browse Sections / Templates / Snippets folders) to locate the Liquid file that renders the broken list — common culprits are `header.liquid`, `footer.liquid`, `navigation.liquid`, `collection-template.liquid`, or a snippet like `product-features.liquid`.
3. Find the `<li>` element and look at its parent tag. If it is a `<div>`, `<nav>`, or any non-list element, wrap the block of `<li>` tags in `<ul>...</ul>` (or `<ol>...</ol>` for ordered lists).
4. If the parent element must remain (e.g. a `<nav>` wrapping a menu), nest a `<ul>` inside it and move the `<li>` elements inside that `<ul>`: `<nav><ul><li>...</li></ul></nav>`.
5. Save the file and preview the theme. Use Chrome DevTools → Elements → Accessibility panel to confirm the list is now announced correctly.
6. If you use a third-party app that injects list markup (e.g. a product-tabs or mega-menu app), contact the app developer to fix the generated HTML or replace the app.

What is listitem?

HTML lists are built from two parts: a container (`<ul>` for unordered, `<ol>` for ordered) and its items (`<li>`). When a `<li>` element's parent is something other than `<ul>`, `<ol>`, or an element with `role="list"`, the list structure is broken. This means a screen reader — the software blind and low-vision shoppers use to navigate — cannot tell the user they are inside a list, how many items it contains, or let them jump between items efficiently. The WCAG success criterion 1.3.1 (Info and Relationships) requires that structure conveyed visually (like a list of product features or navigation links) also be conveyed in the underlying code.

Screen reader users rely on correct list markup to understand and navigate your page — if list items are orphaned from their parent container, assistive technology may read each item as isolated, unrelated text, destroying the meaning of product feature lists, navigation menus, breadcrumbs, and shopping cart line items. This is a WCAG 2.x Level A failure (the most severe category), which creates legal accessibility risk under laws like the ADA in the US, the EAA in Europe, and equivalent legislation worldwide — online retailers have faced lawsuits and regulatory action over exactly these kinds of structural failures. Beyond legal risk, poor accessibility can reduce conversions from the roughly 1-in-4 adults who have a disability, and Google's crawlers also use semantic structure to understand page content, so clean markup supports SEO as a secondary benefit.

See the complete Listitem guide for every platform and the full background.