<li> elements must be inside a <ul> or <ol>
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.
If you use <li>, it must live inside <ul> or <ol> — no exceptions.
Why this matters and how to fix it
Why this matters
Screen readers expect list items to be part of a semantic list structure. When `<li>` elements are placed outside of `<ul>` or `<ol>`, assistive technologies cannot announce list structure or item count. This breaks navigation and makes the page harder to understand for non-visual users.
How to fix this issue
Wrap list items in `<ul>` (unordered list) or `<ol>` (ordered list). Do not replace `<li>` with styled `<div>` or `<span>`, and do not wrap `<li>` in non-list elements inside the list.
Developer guidance
Component libraries often generate lists dynamically. Ensure that components rendering list items actually produce `<li>` inside a `<ul>` or `<ol>`. Avoid patterns like `<ul><div><li>…</li></div></ul>` — list items must be direct children.
Code examples
Incorrect Implementation
<ul><div>Item</div></ul>Correct Implementation
<ul><li>Item</li></ul>Real-World Examples
Before
<div class="features">
<li>Fast performance</li>
<li>24/7 support</li>
</div>
<!-- Screen reader does NOT announce list → user gets disconnected fragments -->After
<ul class="features">
<li>Fast performance</li>
<li>24/7 support</li>
</ul>
<!-- Screen reader: 'List of 2 items' → clear structure and navigation -->CSS Example (Guidance)
/* Style semantic lists instead of using divs */
ul.features {
list-style: disc;
padding-left: 1.25rem;
}
ul.features li {
margin-bottom: 0.5rem;
}Manual testing
- 1. Inspect the list region in DevTools.
- • Expected: <li> elements are direct children of <ul> or <ol>.
- • Failure: <li> elements appear inside <div>, <p>, <span>, or outside any list.
- 2. Turn on a screen reader (NVDA, VoiceOver, or TalkBack).
- 3. Navigate to the list.
- • Expected: Screen reader announces 'List of X items'.
- • Expected: Each item is announced as 'list item'.
- 4. If the list is not announced as a list, refactor markup.
- 5. Re-test after refactor to confirm correct semantic structure.
Trusted by organizations across Europe working toward WCAG and EAA conformance