Rampsight

All rules

Structure

List items must sit inside a list

Why it matters

An <li> outside a <ul> or <ol> has no list to belong to. Its position and the total count — the two things that make a list navigable — do not exist.

How to fix it

  1. Wrap the items in <ul> or <ol>.
  2. Where a framework injects a wrapper between them, give it role="presentation".

In markup

Fails
<div>
  <li>First</li>
</div>
Passes
<ul>
  <li>First</li>
</ul>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on listitem (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.