How to fix list on Adobe Commerce (Magento)

Steps for 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.

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.

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.

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