<li> elements must be contained in a <ul> or <ol>
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 (
<ul>). When it is wrapped with any other element,
its semantic meaning will probably be lost.
1 <ul>2✓ <li>A list Item</li>3✓ <li>Another list Item</li>4 </ul>56 <ol>7✓ <li>A list Item</li>8✓ <li>Another list Item</li>9 </ol>1011 <div>12✗ <li>A list Item</li>13✗ <li>Another list Item</li>14 </div>1516 <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)