<li> elements must be contained in a <ul> or <ol>
How to Fix the Problem
Ensure that all list item li
elements are wrapped inside of
ul
or ol
parent elements.
List items may be contained in either unordered (bullet) lists or ordered (sequentially numbered) lists.
Screen readers notify users when they come to a list, and tell them how many items are in a list. Announcing the number of list items and the current list item helps listeners know what they are listening to, and what to expect as they listen to it. Child list item elements must be contained within the appropriate parent list elements enabling screen readers to inform the listener that they are listening to a list.
Bad example
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
Good example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Why it Matters
For a list to be valid, it must have both parent and child elements. Parent
elements can either be a set of ul
tags or a set of
ol
tags. Child elements must be declared inside of these tags
using the li
tag.
Screen readers notify users when they come to a list, and tell them how many items are in a list. Announcing the number of items in a list and the current list item helps listeners know what they are listening to, and what to expect as they listen to it.
If you don't mark up a list using proper semantic markup in a hierarchy, list items cannot inform the listener that they are listening to a list when no parent is indicating the presence of a list and the type of list.
Rule Description
All list items (li
) must be contained within ul
or
ol
parent elements.
The Algorithm (in simple terms)
Ensures li
elements are used semantically.