list
Web validation
<ol>, <ul> respectively) must contain only <li>, <script>, or <template> elements as direct children.Lists rely on a parent–child relationship between the list container (<ul> or <ol>) and its items (<li>). When other content elements break that structure, assistive technologies cannot announce the list or the count of items, so users may misunderstand how information is grouped.
Screen readers inform listeners that they have encountered a list and how many items it holds. If the DOM contains stray headings, paragraphs, or other elements directly inside a list, this announcement may not happen, or omit elements that are not list items, making it hard for screen reader users to understand the structure and content hierarchy.
Pass Patterns
Valid unordered list
The list container includes only <li> children.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>Fail Patterns
The list contains non <li> content
The extra <div> and <h3> elements interrupt the expected structure, so screen readers may fail to announce the list or its length, or just read it incorrectly.
<ul>
<div>
<h3>Fruit Basket</h3>
<li>Apple</li>
<li>Banana</li>
</div>
</ul>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 list and browse through its content.
Expected result: The screen reader announces the list, its type, and the amount of list items, and nothing more.
Actual result: The invalid list is not announced as a list or the item count is incorrect, or announces the list and items count, but also reads the rest of the content with an invalid context.
FAQ
How does this issue relate to 1.3.1 Info and Relationships?
SC 1.3.1 requires that semantic relationships be conveyed programmatically. Lists that contain elements other than <li> break that programmatic relationship, so assistive technologies cannot convey the grouping to users.
Why is this issue marked as Serious?
Incorrectly structured lists prevent screen readers from announcing list semantics, which disrupts navigation and comprehension for people who rely on auditory output. Because lists are common and essential for understanding grouped information, the impact is high across browsers and assistive technologies, justifying a Serious severity.
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. |