How to fix list on WordPress.org

Fix all HTML list elements so that `<ul>` and `<ol>` contain only valid `<li>` children, and `<li>` elements appear only inside a proper list container, ensuring correct semantic list structure throughout your store.

Steps for 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.
Official WordPress.org documentation ↗
<!-- ❌ 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.

Not sure if your WordPress.org store has this?

Run a free SEOLZ audit — we’ll find list and every other issue across your whole site.

Scan my site free

Fix list on another platform