Accessibility Insights

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 role attribute to override the native semantics of a <li> element.
  • If you include any other HTML elements, enclose them within <li> elements.

Example

 

Fail

This unordered list has one <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

The heading content is removed from the list, and instead marked up as an <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

More examples