List

Moderate effort

Found on 35% of audited stores.

Fix all HTML lists so that only valid child elements appear directly inside `<ul>` and `<ol>` tags, and only `<ul>` or `<ol>` elements wrap `<li>` items.

What it is

HTML has strict rules about how lists must be structured. An unordered list (`<ul>`) or ordered list (`<ol>`) should contain only `<li>` (list item) elements as direct children — nothing else. Likewise, every `<li>` must live inside a `<ul>`, `<ol>`, or `<menu>` element. A "list" violation means your page has markup that breaks these rules: for example, a `<div>` or `<p>` placed directly inside a `<ul>`, bare `<li>` tags floating outside any list container, or `<li>` elements nested inside each other without a proper parent. These mistakes are often invisible to sighted visitors, but they create a broken experience for users who rely on assistive technology such as screen readers.

Why it matters

Screen readers (used by roughly 7 million Americans) use list structure to announce "list of 5 items" and let users jump between items quickly. Broken list markup confuses this navigation, causing screen reader users to miss navigation menus, product feature lists, size guides, and checkout steps — directly costing you customers and raising legal exposure under ADA, Section 508, and the European Accessibility Act. Google also uses semantic HTML to understand page structure; malformed lists can weaken how well your navigation and content are parsed. Because courts have increasingly applied ADA Title III to e-commerce websites, incorrect accessibility markup is a genuine legal risk, not just a best-practice issue.

How to fix it

  1. Audit your pages: use a browser DevTools inspector or an accessibility tool (e.g. axe browser extension) to locate every reported list error — look for red flags like `<div>` or `<span>` directly inside `<ul>`/`<ol>`, or `<li>` tags with no list parent.
  2. Fix invalid children: any element that is a direct child of `<ul>` or `<ol>` but is NOT an `<li>` (or `<script>`/`<template>`) must either be wrapped in an `<li>`, moved outside the list, or replaced with a proper `<li>`.
  3. Fix orphaned list items: any `<li>` that does not have a `<ul>`, `<ol>`, or `<menu>` parent must be wrapped in the correct list container.
  4. Check nested lists: a list nested inside another list must be placed INSIDE an `<li>` element — never as a direct sibling child of the outer `<ul>`/`<ol>`.
  5. Review generated/theme markup: navigation menus, breadcrumbs, product feature bullets, footer links, and mega-menus are the most common sources of list errors in ecommerce themes — inspect these areas specifically.
  6. Re-test: run the axe browser extension or another automated scanner on affected pages to confirm zero remaining list violations before publishing.

Fix it on your platform

Pick your platform for the exact steps.

How to fix list on Shopify
  1. In your Shopify Admin, go to Online Store → Themes → click the '...' (Actions) menu next to your active theme → Edit code.
  2. The most common list errors live in navigation and footer snippets. Open sections/header.liquid (or snippets/navigation.liquid) and locate any `<ul>` used for the nav menu — ensure every direct child is `<li>`.
  3. Open sections/footer.liquid and repeat the check for footer link lists.
  4. For product feature bullets, open sections/product-template.liquid (or the relevant product section file) and confirm `<ul>`/`<ol>` contains only `<li>` children.
  5. If your theme uses a mega-menu or third-party navigation app, check that app's own settings or custom HTML blocks for the same pattern.
  6. Save each file, then use the Shopify Theme Preview to verify appearance, and re-run the axe browser extension to confirm no remaining list violations.
Full Shopify guide →Official Shopify docs ↗
How to fix list on WooCommerce
  1. In WordPress Admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP to avoid overwriting on updates).
  2. Open header.php and any navigation-related template parts (e.g. inc/navigation.php, template-parts/header/site-branding.php) — confirm all `<ul>` nav menus contain only `<li>` children.
  3. Check footer.php for footer widget list markup.
  4. For WooCommerce-specific pages, locate woocommerce/templates/ (or your theme's overrides in yourtheme/woocommerce/) — inspect product loops, breadcrumbs (breadcrumb.php), and widget templates.
  5. If using a page builder (Elementor, Divi), open the affected page in the builder, find the List or Nav widget, and switch to its HTML/Custom Code view to correct the markup.
  6. Save, clear your caching plugin cache, and re-test with the axe browser extension.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix list on BigCommerce
  1. In BigCommerce Admin, go to Storefront → My Themes → click Customize on your active theme → select Edit Theme Files (Advanced).
  2. Open templates/components/header.html and templates/components/navigation/ — locate the nav `<ul>` blocks and ensure only `<li>` elements are direct children.
  3. Open templates/components/footer.html and repeat the check for footer link lists.
  4. For category/product pages, check templates/pages/category.html and templates/pages/product.html for any custom list markup.
  5. Stencil CLI users: make changes locally in the appropriate Handlebars template files, then run `stencil push` to deploy.
  6. Re-test with axe after pushing the theme update.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix list on Wix
  1. Open the Wix Editor for your site.
  2. Click on any navigation menu element → click 'Settings' or 'Design' → use the built-in menu widget rather than manually coding a list; Wix's native menu component outputs correct list HTML automatically.
  3. For custom HTML list content (e.g. in an HTML Embed widget), click the widget → 'Enter Code' and manually correct any malformed `<ul>`/`<ol>` markup in the code panel.
  4. For Wix Studio (advanced): open the page, select the element, open the Properties & Events panel, and switch to Dev Mode (Enable Dev Mode in the top bar) to inspect and edit generated HTML via Velo if needed.
  5. If using a Wix Blog or Wix Stores component, these output semantic HTML automatically — verify by running axe on the live page.
  6. Publish the site and re-run your accessibility scan.
Full Wix guide →Official Wix docs ↗
How to fix list on Squarespace
  1. In Squarespace, go to Pages → select the affected page → click Edit.
  2. For navigation: Squarespace auto-generates nav HTML — if errors appear here, go to Design → Navigation Styles and switch to a different nav style, or use the Footer editor to rebuild footer links using the built-in Link Block rather than a Code Block.
  3. For body content lists: click on the text block containing the list → highlight the items → use the text editor toolbar's List button (bulleted or numbered) to convert them to a proper Squarespace list, which outputs correct `<ul>`/`<li>` markup.
  4. For custom Code Blocks (Settings → Advanced → Code Injection or a Code Block on a page): open the code block and manually correct the `<ul>`/`<ol>` HTML to ensure only `<li>` children are used.
  5. Save and re-publish the page, then re-test with axe.
Full Squarespace guide →Official Squarespace docs ↗
How to fix list on Webflow
  1. Open Webflow Designer for your project.
  2. In the Navigator panel (left sidebar), locate any List element (tagged as `<ul>` or `<ol>`) — click it to select it.
  3. In the Elements panel, verify that every child of the List is a List Item (`<li>`). If you see a Div Block, Text Block, or other element as a direct child of the List, drag it inside an existing List Item or wrap it: right-click → Wrap in List Item.
  4. For nav menus: select the Navbar component → open its settings — Webflow's Navbar outputs `<nav>` with an unordered list; ensure no extra Div Blocks are placed as direct children of that list in the Navigator.
  5. For CMS-generated lists: open the Collection List settings and ensure the Collection List Wrapper (`<ul>`) contains only Collection Items (`<li>`).
  6. Publish the site and validate with the axe browser extension.
Full Webflow guide →Official Webflow docs ↗
How to fix list on Adobe Commerce (Magento)
  1. SSH or SFTP into your server and navigate to your active theme directory: app/design/frontend/[Vendor]/[Theme]/.
  2. The most common sources of list errors are: Magento_Theme/templates/html/header.phtml (site header/nav), Magento_Theme/templates/html/footer.phtml, and Magento_Catalog/templates/product/ (product feature lists).
  3. Open the relevant .phtml file, locate any `<ul>` or `<ol>` blocks, and ensure every direct child is `<li>`. Move any `<div>` or `<p>` wrappers inside `<li>` tags.
  4. If the nav menu is generated by Magento_Theme/templates/html/topmenu.phtml or a navigation module, open that file and apply the same fix.
  5. Run `bin/magento cache:clean && bin/magento cache:flush` after saving template changes.
  6. Re-test on the frontend with the axe browser extension to confirm all list violations are resolved.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix list on WordPress.org
  1. To avoid losing changes on theme updates, create a child theme. Copy the offending template file (e.g. 'header.php', 'page.php') into your child theme directory.
  2. Open the file in a code editor (or Appearance → Theme File Editor) and search for '<ul', '<ol', '<li' to locate invalid nesting.
  3. Correct the markup: only <li> as direct children of <ul>/<ol>, and every <li> must live inside a list container.
  4. For menus, WordPress outputs standard <ul>/<li> structure via 'wp_nav_menu()'. If a custom Walker class is used (often in 'functions.php'), find the walker and correct the render_list_item / start_el methods to output proper <li> tags.
  5. Clear caching (plugin or server), then re-audit with the axe DevTools extension.
Full WordPress.org guide →Official WordPress.org docs ↗
How to fix list on Drupal
  1. Broken list markup in Drupal usually originates in a Twig template. Find the relevant template in your theme's 'templates/' folder (e.g. 'menu.html.twig', 'item-list.html.twig').
  2. Open the template and verify that any <ul> or <ol> loop outputs <li> wrappers correctly: {% for item in items %}<li>{{ item.content }}</li>{% endfor %}.
  3. If the issue is in a contributed module's template, copy the template into your theme's templates directory (Drupal's template override system), then fix it there.
  4. Run 'drush cr' (cache rebuild) or go to Configuration → Performance → Clear all caches, then re-audit the page.
Full Drupal guide →Official Drupal docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find list — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is List?

HTML has strict rules about how lists must be structured. An unordered list (`<ul>`) or ordered list (`<ol>`) should contain only `<li>` (list item) elements as direct children — nothing else. Likewise, every `<li>` must live inside a `<ul>`, `<ol>`, or `<menu>` element. A "list" violation means your page has markup that breaks these rules: for example, a `<div>` or `<p>` placed directly inside a `<ul>`, bare `<li>` tags floating outside any list container, or `<li>` elements nested inside each other without a proper parent. These mistakes are often invisible to sighted visitors, but they create a broken experience for users who rely on assistive technology such as screen readers.

Why does list matter?

Screen readers (used by roughly 7 million Americans) use list structure to announce "list of 5 items" and let users jump between items quickly. Broken list markup confuses this navigation, causing screen reader users to miss navigation menus, product feature lists, size guides, and checkout steps — directly costing you customers and raising legal exposure under ADA, Section 508, and the European Accessibility Act. Google also uses semantic HTML to understand page structure; malformed lists can weaken how well your navigation and content are parsed. Because courts have increasingly applied ADA Title III to e-commerce websites, incorrect accessibility markup is a genuine legal risk, not just a best-practice issue.

How do I fix list?

Fix all HTML lists so that only valid child elements appear directly inside `<ul>` and `<ol>` tags, and only `<ul>` or `<ol>` elements wrap `<li>` items.

Authoritative references

Related Accessibility (WCAG) issues