Rampsight

All rules

Structure

Lists need list items as children

Why it matters

A <ul> with wrapper divs inside it stops being a list in the accessibility tree, so "list of 12 items" is never announced and the count is lost.

How to fix it

  1. Put only <li> (plus <script> and <template>) directly inside <ul> and <ol>.
  2. Move wrapper elements inside the <li>, not around it.
  3. If the content is not a list, use a different element rather than removing the semantics.

In markup

Fails
<ul>
  <div><li>First</li></div>
</ul>
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 list (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.