List

What it is

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.

Why it matters

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.

How to fix it

1. Identify the offending list element: use your browser's DevTools (right-click → Inspect) or an accessibility checker to find the exact `<ul>`, `<ol>`, `<dl>`, or `<li>` tag flagged.
2. Check what is directly inside a `<ul>` or `<ol>`: every direct child must be an `<li>`. If you find `<div>`, `<span>`, `<p>`, `<a>`, or any other element as a direct child, move that content inside an `<li>` wrapper.
3. Check every `<li>` to make sure it lives inside a `<ul>`, `<ol>`, or `<menu>` — never floating loose inside a `<div>` or `<nav>` without a parent list tag.
4. For description lists (`<dl>`), ensure direct children are only `<dt>` (term) and `<dd>` (description) elements — no bare text nodes or `<div>` wrappers (a `<div>` is allowed inside `<dl>` in HTML5 only as a grouping wrapper containing `<dt>`/`<dd>` pairs, not as a sibling to them).
5. If you are using a navigation menu built with a theme or plugin, inspect its template/component and replace any non-`<li>` direct children of the `<ul>` with properly wrapped `<li>` elements, keeping your links or content inside the `<li>`.
6. After editing, re-run an accessibility checker (axe DevTools browser extension, WAVE, or your platform's built-in audit) to confirm the 'list' rule now passes.

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

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• Web accessibility tutorials — W3C WAI