Back to Info and Examples for Accessibility Insights for Web
listitem
All <li> elements must be contained by a <ul>, <ol>, or <menu> parent element.
Why it matters
In a properly structured list, all list items ( <li> elements) are contained by a <ul>, <ol>, or <menu> parent element.
When an assistive technology encounters a list that’s poorly structured, it might respond in an unexpected way. As a result, people who use assistive technologies might find it difficult to interpret the list.
How to fix
All <li> elements must be contained by a <ul>, <ol>, or <menu> parent element.
For each list item (<li> element):
- Enclose the
<li>element in a<ul>,<ol>, or<menu>element (or in a parent element withrole="list"). - Don’t use a
roleattribute to override the native list semantics of the<ul>,<ol>, or<menu>element.
Example
Fail
<ul>, <ol>, or <menu> parent element.
Assistive technologies will not interpret the <li> elements as being part of a single list.
Some assistive technologies may not even interpret the content as list items at all.<h2>Beverages</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Soda</li>
Pass
<ul> element.
Assistive technologies can interpret the list consistently.<h2>Beverages</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Soda</li>
</ul>
About this rule
This rule passes if:
- List item has a
<ul>,<ol>,<menu>orrole="list"parent element