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

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/list
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

According to the HTML specification, the only permitted content directly inside `<ul>` and `<ol>` elements are `<li>` elements, plus non-content elements like `<script>` and `<template>`. When you place other content elements — such as `<div>`, `<span>`, `<p>`, `<a>`, or plain text nodes — directly inside a list container, you create an invalid structure that breaks the semantic relationship between the list and its items.

## Why This Matters

Screen readers announce lists in a specific way to help users navigate and comprehend grouped content. When a user encounters a properly structured list, their screen reader will typically announce something like "list, 5 items" and then allow the user to move through each item individually. This behavior depends entirely on the list being structured correctly.

When non-`<li>` content elements appear as direct children of `<ul>` or `<ol>`, screen readers may:

- Fail to announce the total number of items in the list
- Skip over improperly nested content entirely
- Present list items and non-list content in a confusing, disjointed manner

This primarily affects **blind** and **deafblind** users who rely on screen readers, but it also impacts anyone using assistive technology that parses the DOM structure to present content.

## Related WCAG Success Criteria

This rule maps to **WCAG 2.0, 2.1, and 2.2 Success Criterion 1.3.1: Info and Relationships (Level A)**. This criterion requires that information, structure, and relationships conveyed through visual presentation can be programmatically determined. When a list is visually presented as a group of related items but its underlying HTML structure is invalid, the relationship between the list container and its items cannot be reliably communicated to assistive technology.

## How to Fix It

1. **Ensure every content element inside a `<ul>` or `<ol>` is wrapped in an `<li>`.** If you have `<div>`, `<span>`, `<p>`, `<a>`, or any other content element as a direct child of the list, move it inside an `<li>`.
2. **Move non-list content outside the list.** If you have headings, paragraphs, or other content that isn't a list item, place it before or after the list element rather than inside it.
3. **Nest sub-lists inside `<li>` elements.** If you need a nested `<ul>` or `<ol>`, it must be placed inside an `<li>` of the parent list, not directly as a child of the parent list.

## Examples

### Incorrect: `<div>` elements directly inside a `<ul>`

```html
<ul>
  <div>Apples</div>
  <div>Bananas</div>
  <div>Cherries</div>
</ul>
```

Screen readers cannot identify these `<div>` elements as list items.

### Correct: `<li>` elements as direct children

```html
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
```

### Incorrect: Heading placed directly inside a list

```html
<ul>
  <h3>Fruits</h3>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
```

### Correct: Heading moved outside the list

```html
<h3>Fruits</h3>
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
```

### Incorrect: Nested list placed directly inside a `<ul>`

```html
<ul>
  <li>Fruits</li>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
  </ul>
  <li>Vegetables</li>
</ul>
```

### Correct: Nested list placed inside an `<li>`

```html
<ul>
  <li>
    Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>
```

### Incorrect: Link directly inside an `<ol>`

```html
<ol>
  <a href="/step-1"><li>Step one</li></a>
  <a href="/step-2"><li>Step two</li></a>
</ol>
```

### Correct: Link placed inside the `<li>`

```html
<ol>
  <li><a href="/step-1">Step one</a></li>
  <li><a href="/step-2">Step two</a></li>
</ol>
```