Digital Accessibility Knowledge Base

list

<ul> and <ol> elements must only directly contain <li>, <script>, or <template> elements

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.

Lists (<ul>, <ol>) are expecting to have only list items (<li>) as direct children. Other element types might break its semantic meaning.

Quick Fixes

Make sure <ul> and <ol> elements don't have any direct children that are not <li>.
1    <ul>
2✓       <li><!-- List item content --></li>
3✓       <li><!-- List item content --></li>
4    </ul>
5

6    <ol>
7✓       <li><!-- List item content --></li>
8✓       <li><!-- List item content --></li>
9✗       <div>
10✗           <li><!-- List item content --></li>
11✗           <li><!-- List item content --></li>
12✗       </div>
13    </ol>
14

15    <ul>
16✗       <div><!-- div content --></div>
17✗       <dt><!-- Description term must be a child of description list --></dt>
18✗       <input type="text" />
19    </ul>
20

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)