How to fix list on WooCommerce

Steps for WooCommerce

1. Log in to WordPress Admin → Appearance → Theme File Editor (or use a code editor via FTP/SFTP for a safer workflow).
2. Navigation lists are commonly in 'header.php', 'functions.php' (walker classes), or a dedicated 'nav-menus.php'. Product feature lists are in WooCommerce template overrides under 'yourtheme/woocommerce/'.
3. Search the relevant template file for '<ul', '<ol', or '<li' and verify that only <li> elements are direct children of any <ul>/<ol>.
4. To override a WooCommerce core template without losing updates, copy the original file from 'wp-content/plugins/woocommerce/templates/' into 'wp-content/themes/yourtheme/woocommerce/' and then edit the copy.
5. If a page builder (Elementor, Divi, etc.) built the page, open the page in the builder, locate the List or Nav widget, and fix the markup via the widget settings rather than editing raw HTML.
6. Save, clear any caching plugins (e.g. WP Rocket, W3 Total Cache), and re-audit with the axe DevTools browser extension.

<!-- ❌ INCORRECT: <div> as direct child of <ul> -->
<ul>
  <div class="item">Feature one</div>
  <div class="item">Feature two</div>
</ul>

<!-- ✅ CORRECT: only <li> as direct children -->
<ul>
  <li class="item">Feature one</li>
  <li class="item">Feature two</li>
</ul>

<!-- ❌ INCORRECT: <li> outside a list -->
<nav>
  <li><a href="/shop">Shop</a></li>
</nav>

<!-- ✅ CORRECT: <li> inside <ul> inside <nav> -->
<nav>
  <ul>
    <li><a href="/shop">Shop</a></li>
  </ul>
</nav>

What is list?

HTML has three types of lists: unordered (`<ul>`, bullet lists), ordered (`<ol>`, numbered lists), and description lists (`<dl>`). Each has strict rules about which child elements are allowed inside it. A `<ul>` or `<ol>` must contain only `<li>` items (and optionally `<script>` or `<template>` tags); a `<dl>` must contain only `<dt>` and `<dd>` elements; and an `<li>` must always be a direct child of a `<ul>`, `<ol>`, or `<menu>`. When these rules are broken — for example, a `<div>` placed directly inside a `<ul>`, or an `<li>` used outside any list — the list structure is considered invalid. WCAG Success Criterion 1.3.1 ("Info and Relationships") requires that structure and meaning conveyed visually also be available in the code so assistive technologies can understand it.

Screen readers used by blind or low-vision shoppers rely entirely on correct list markup to announce how many items are in a list, let users jump between lists, and convey grouped relationships like navigation menus, product feature bullets, or breadcrumbs. When list structure is broken, screen readers may either skip the content entirely or read it as a confusing wall of disconnected text — causing real shoppers to miss product benefits, navigation options, or checkout steps. Beyond accessibility, invalid HTML can confuse search-engine crawlers that use list structure as a signal for site navigation and content hierarchy, which can indirectly harm rankings. In many jurisdictions (USA ADA, EU EAA, UK Equality Act), inaccessible storefronts carry genuine legal risk; a broken list on a navigation menu or product page is exactly the kind of straightforward violation that appears in accessibility demand letters.

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