listitem
Web validation
<li> elements must be direct children of an <ul> or <ol> list.List items (<li>) convey their meaning only when they sit inside an unordered (<ul>) or ordered (<ol>) list. Without that parent, assistive technologies cannot announce that a list has begun, how many items it contains, or which item is current. People who rely on this structural context may miss information or become disoriented.
Pass Patterns
A properly structured unordered list
The parent <ul> defines the list, and each direct child <li> is announced as an item.
<ul>
<li>First task</li>
<li>Second task</li>
</ul>A properly structured ordered list
Screen readers announce the position of each <li> within the <ol>.
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>Fail Patterns
List items outside any list
Standalone <li> elements have no list context, so nothing announces that these are related items.
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>List items wrapped in a non-list container
The <div> interrupts the required hierarchy, hiding list semantics from assistive technology.
<div>
<li>Monday</li>
<li>Tuesday</li>
</div>A note about list items wrapped in a non-list element:
If the non-list element is a direct child of a list element (<ul> or <ol>), screen readers will usually read the list correctly. However, it is advisable to avoid this, especially if the non-list element has semantic meaning. If there is no choice and the list items must be wrapped in a non-list element, it is advisable to add role="none" attribute to it.
WCAG techniques
Failure techniques
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Navigate to the orphan list items.
- Navigate list item by list item.
Expected result: The screen reader announces that you got to a list (ordered or unordered), and the amount of list items. When moving between list items the screen reader announces their content and their position in the list.
Actual result: The screen reader does not announce the list context. When moving between list items the screen reader only announces their content without a reference to their position in the list.
FAQ
How does this issue relate to 1.3.1 Info and Relationships?
SC 1.3.1 requires that relationships conveyed visually are also programmatically determinable. A list’s relationship (items belonging to a group) is lost when <li> elements lack a list parent, so users who depend on structured information do not receive it, causing a failure of this success criterion.
Why is this issue marked as Serious?
When list semantics are broken, screen-reader users cannot perceive grouping, sequence, or item counts, which are essential for understanding content. The defect affects every major browser and assistive technology combination and can mislead or confuse users, so the impact is considered serious.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.3.1 Info and Relationships (A) | Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
| EN 301 549 | 9.1.3.1 Info and Relationships | Same as the WCAG text. |
| 508 Trusted Tester | 1.3.1-list-type, 10.D | All visually apparent lists are programmatically identified according to their type. |