Listitem
Moderate effortFound on 22% of audited stores.
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.
What it is
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.
Why it matters
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.
How to fix it
- Identify all `<li>` elements on the page and inspect their direct parent element in the HTML source or DevTools.
- Confirm the parent is either `<ul>`, `<ol>`, or an element with the explicit ARIA attribute `role="list"`. If it is any other element (e.g. `<div>`, `<nav>`, `<section>`, `<span>`), the markup is invalid.
- Fix the markup by wrapping the `<li>` elements in the correct container: use `<ul>` for unordered/bulleted lists (product features, nav links, tags) and `<ol>` for ordered/numbered lists (steps, rankings, breadcrumbs).
- If you intentionally removed the list bullets/numbers with CSS (`list-style: none`) and the parent cannot be changed to `<ul>`/`<ol>`, add `role="list"` to the existing parent element as a last resort — but restructuring the HTML is always preferred.
- Validate the fix using a browser accessibility inspector (e.g. Chrome DevTools Accessibility panel, axe DevTools browser extension, or NVDA/VoiceOver) to confirm the element is now announced as a list with the correct item count.
- Re-run your accessibility scanner to confirm the listitem rule no longer flags the element.
Fix it on your platform
Pick your platform for the exact steps.
How to fix listitem on Shopify
- In your Shopify admin go to Online Store → Themes → click the three-dot menu beside your active theme → Edit code.
- 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`.
- 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).
- 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>`.
- Save the file and preview the theme. Use Chrome DevTools → Elements → Accessibility panel to confirm the list is now announced correctly.
- 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.
How to fix listitem on WooCommerce
- Open your WordPress admin → Appearance → Theme File Editor (or use a local/FTP editor for a safer edit).
- Identify which template file renders the broken list — common files are `header.php`, `footer.php`, `functions.php`, page templates, or a plugin shortcode output. Use your browser's View Source / DevTools to trace the HTML to its template.
- Find the `<li>` element and confirm its direct parent is not `<ul>` or `<ol>`. Wrap the `<li>` elements in the appropriate container: `<ul>` or `<ol>`.
- If the issue is inside a plugin (e.g. a WooCommerce widget, product tabs plugin, or mega-menu plugin), first try the plugin's own settings for 'list markup' or 'HTML output'. If unavailable, use a child-theme template override: copy the plugin's template file into your child theme's directory and edit it there.
- Clear any caching plugin cache (e.g. WP Super Cache, W3 Total Cache, LiteSpeed Cache) after saving.
- Re-check with the axe DevTools browser extension to confirm the violation is resolved.
How to fix listitem on BigCommerce
- In your BigCommerce admin go to Storefront → My Themes → click Customize on your active theme → Edit Theme Files (or download the theme and edit locally).
- Locate the Handlebars (.html) template file responsible for the broken list — common files are `templates/layout/base.html`, `templates/components/header.html`, `templates/components/footer.html`, or a product/category partial.
- Find the `<li>` element. If its parent is a `<div>` or other non-list element, wrap all sibling `<li>` tags in `<ul>...</ul>` (or `<ol>` if ordered).
- If navigation is generated by the Stencil framework's `{{navigation}}` helper, override the navigation component in your theme's components directory and correct the HTML structure there.
- Upload/save the theme, then use the BigCommerce preview URL to verify. Run axe DevTools in the browser to confirm the fix.
How to fix listitem on Wix
- Open your site in the Wix Editor. Wix generates its own HTML, so you cannot directly edit the DOM of built-in widgets — but you can address this in two ways.
- For lists inside rich-text elements (e.g. a text box with bullet points): click the text element → use the Wix text toolbar to apply the built-in 'Bulleted List' or 'Numbered List' formatting, which outputs correct `<ul><li>` markup.
- For navigation menus or repeaters, Wix's built-in menu widgets output their own HTML. If the scanner is flagging a Wix built-in component, report the issue to Wix support — you cannot change the underlying markup of core widgets.
- For custom HTML needs, add a Wix HTML iframe embed (Add → Embed → HTML iframe) and write your own accessible `<ul><li>` list markup directly inside it.
- If you use Wix Studio (formerly Editor X), use the custom code panel (Settings → Custom Code) to inject or correct HTML markup in blocks that support it.
- Publish the site and verify using the axe DevTools browser extension on the live URL.
How to fix listitem on Squarespace
- Log in to your Squarespace account and open the affected page in the Pages panel.
- If the broken list is inside a text block: click Edit on the block, select your list text, and use the Squarespace text toolbar to apply 'Bulleted List' or 'Numbered List' formatting — this generates proper `<ul><li>` or `<ol><li>` HTML.
- If the broken list is in a custom Code Block (Add Block → Code), click to edit the block and rewrite the markup so `<li>` elements are wrapped in `<ul>` or `<ol>`.
- For list markup injected via Settings → Advanced → Code Injection (site-wide header/footer scripts), find the relevant script and correct the HTML structure there.
- If the issue originates in a Squarespace built-in navigation or summary block and you cannot change the markup, contact Squarespace support or use custom CSS combined with ARIA overrides only as a last resort.
- Save and preview the page. Use axe DevTools browser extension to verify the fix.
How to fix listitem on 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.
How to fix listitem on Adobe Commerce (Magento)
- SSH into your server (or use your local development environment) and navigate to your active theme directory: `app/design/frontend/<Vendor>/<theme>/`.
- Use a text editor or IDE to search for the template file (.phtml) that renders the broken list — common locations are `Magento_Theme/templates/html/header.phtml`, `Magento_Catalog/templates/product/list.phtml`, or a custom module template.
- In the .phtml file, locate the `<li>` element and confirm its direct parent. If it is a `<div>` or other non-list tag, wrap the `<li>` block in `<ul>...</ul>` (or `<ol>` if appropriate).
- If the layout is controlled by a layout XML file (`default.xml`, `catalog_category_view.xml`, etc.), check whether a container is overriding the list's HTML tag — correct the `htmlTag` attribute to `ul` or `ol` in the relevant XML block.
- Run `bin/magento cache:clean` and `bin/magento cache:flush` after making template changes.
- Verify on the frontend using axe DevTools or the Chrome Accessibility panel to confirm the fix.
Does your site have this issue?
Run a free SEOLZ scan to find listitem — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does listitem matter?
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.
How do I fix listitem?
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.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN