How to fix listitem on Webflow
Ensure every `<li>` element is a direct child of a `<ul>` or `<ol>` element (or an element explicitly given `role="list"`), so that screen readers can correctly announce list structure to users.
Steps for Webflow
- Open your project in the Webflow Designer.
- In the Navigator panel (left sidebar), find the element flagged as a list item. Check what its parent element is — it should be a List element (Webflow's `<ul>`) or an Ordered List (`<ol>`).
- If the List Item is nested inside a Div Block or other non-list container, select the List Item(s), cut them, then add a List element (Add Elements panel → Typography → List) in the correct location, and paste the List Items inside it.
- Alternatively, right-click the parent Div Block in the Navigator → wrap in a List element if that option is available, or manually restructure by adding a List, moving items in, then deleting the old wrapper.
- If the list items are generated by a CMS Collection List, open the Collection List settings and ensure the Collection List Wrapper is set to render as `<ul>` or `<ol>` (the default), not overridden with a `<div>` via the Tag settings.
- Publish the site and run axe DevTools in the browser on the published URL to verify the listitem rule no longer fires.
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.
Not sure if your Webflow store has this?
Run a free SEOLZ scan — we’ll find listitem and every other issue across your whole site.
Scan my site free