How to fix list on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify which template (.phtml) or layout XML file generates the broken list. Navigation is commonly in 'Magento_Theme/templates/html/header.phtml' or a custom module; product attributes may be in 'Magento_Catalog/templates/product/view/attributes.phtml'.
2. To safely override a core template, copy it into your custom theme directory at 'app/design/frontend/<Vendor>/<theme>/<Module>/templates/...' mirroring the original path.
3. Open the copied template and search for '<ul', '<ol', or '<li'. Fix any invalid nesting: wrap non-<li> direct children inside <li> tags, and ensure all <li> elements are inside a <ul>, <ol>, or <menu>.
4. Run 'bin/magento cache:flush' and 'bin/magento setup:static-content:deploy' (if in production mode) to apply the changes.
5. Verify by loading the affected page and running axe DevTools or WAVE in the browser.

<!-- ❌ 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.