Lists must contain only list items
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Lists must be lists—only <li> belongs inside <ul> or <ol>.
Overview
Why this matters
When lists contain elements other than <li>, assistive technologies cannot interpret the list structure. Screen readers may skip items or fail to announce the correct number of items, causing users to lose the intended sequence or grouping.
How to fix this issue
Ensure `<ul>` and `<ol>` contain list items as their meaningful children. If extra wrappers are needed for layout, move wrappers inside `<li>` or outside the list. For custom ARIA lists, use `role="list"` with child `role="listitem"`.
Developer Guidance
This issue appears when non-list elements (`div`, `p`, `span`) are inserted directly into list structure for styling. Keep semantics first, then style list items. In component libraries, enforce list children contracts to prevent invalid DOM output.
Code Examples
Incorrect Implementation
<ul>
<div>Step 1: Do this</div>
<div>Step 2: Do that</div>
</ul>Correct Implementation
<ul>
<li>Step 1: Do this</li>
<li>Step 2: Do that</li>
</ul>Real-World Implementation
Before
<ul class="menu">
<span>Home</span>
<span>About</span>
<span>Contact</span>
</ul> <!-- Screen reader does not detect a list -->After
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- Screen reader announces: 'List of 3 items' -->Manual Testing
- 1. Inspect all `<ul>` and `<ol>` structures in rendered DOM.
- 2. Confirm meaningful list children are `<li>` elements (or `role="listitem"` in ARIA lists).
- 3. Move direct non-list children into `<li>` wrappers or outside the list container.
- 4. Re-test with a screen reader and verify list count/order announcements are correct.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance