Digital Accessibility Knowledge Base

listitem

<li> elements must be contained in a <ul> or <ol>

Who might be affected
Screen Reader

Description

Screen readers are widely based on the semantics of UI elements to read the application parts accurately, and there are certain UI elements whose semantics depend on a compound structure of other semantic elements. Semantic parts make up a larger semantic idea, if you will. When the semantics of one of the parts do not fit to the semantics of the rest of the parts, screen readers (and browsers) will not be able to parse and read the element accurately.

List items (<li>) should appear only in a list, and context can be the direct children only of an ordered or unordered lists (<ol>, <ul>). When it is wrapped with any other element, its semantic meaning will probably be lost.

Quick Fixes

Make sure that <li> elements are contained only inside <ol> or <ul> elements.
1    <ul>
2✓       <li>A list Item</li>
3✓       <li>Another list Item</li>
4    </ul>
5

6    <ol>
7✓       <li>A list Item</li>
8✓       <li>Another list Item</li>
9    </ol>
10

11    <div>
12✗       <li>A list Item</li>
13✗       <li>Another list Item</li>
14    </div>
15

16    <ul>
17        <div>
18✗           <li>A list Item</li>
19✗           <li>Another list Item</li>
20        </div>
21    </ul>
22

How Users Are Affected

When a screen reader fails to parse the semantic meaning of UI elements, it cannot mediate it correctly to the user. As a result, the user receives a partial or even incorrect mental image of the UI and might fail to use it.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and relationships (A)