Back to Info and Examples for Accessibility Insights for Web
list
A <ul>, <ol> or <menu> element must directly contain only <li> , <script> or <template> elements.
Why it matters
In a properly structured list, all content is contained within list items. Content includes text and other HTML elements. Certain non-content elements are also allowed.
When an assistive technology encounters a list that’s poorly structured or contains disallowed elements, 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
For each ordered or unordered list ( <ol>, <ul> or <menu> element):
- Make sure all list content is contained within
<li>elements. - Don’t use a
roleattribute to override the native semantics of a<li>element. - If you include any other HTML elements, enclose them within
<li>elements.
Example
Fail
<li> element whose role has been changed to heading.
As a result, assistive technologies do not recognize the element as a list item, but rather as a heading, which is not allowed in a list.
The disallowed content breaks the expected list structure; it isn't clear how assistive technologies should interpret this code.<h2>Beverages</h2>
<ul>
<li role="heading" aria-level="3">Included</li>
<li>Coffee</li>
<li>Tea</li>
<li>Soda</li>
</ul>
Pass
<h3> element that appears before the unordered list in the DOM.
Now, all content within the list is contained within <li> elements. Assistive technologies can interpret the list consistently.<h2>Beverages</h2>
<h3>Included</h3>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Soda</li>
</ul>
About this rule
This rule passes if:
- List (
<ul>,<ol>or<menu>element) has as direct children only<li>,<script>, or<template>elements