Lists must contain only list items

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Lists must be lists—only <li> belongs inside <ul> or <ol>.

Why this matters and how to fix it

Why this matters

When lists contain elements other than <li>, assistive technologies cannot interpret the list structure. Screen readers may skip items or fail to announce the correct number of items, causing users to lose the intended sequence or grouping.

How to fix this issue

Ensure that <ul> and <ol> contain only <li> elements. If additional markup or layout elements are needed, wrap them inside <li> or move them outside the list. For ARIA-based custom lists, apply `role="list"` to the container and `role="listitem"` to each item.

Automated detection · Manual review recommended

Developer guidance

This issue occurs when non-list elements such as <div> or <p> are placed inside lists for layout or spacing purposes. Apply styling directly to the <li> elements, or restructure the markup so only valid list items are used within the list. The GetWCAG scanner highlights invalid list structures to ensure clean, semantic HTML and reliable screen reader navigation.

Code examples

Incorrect Implementation

<ul>
  <div>Step 1: Do this</div>
  <div>Step 2: Do that</div>
</ul>

Correct Implementation

<ul>
  <li>Step 1: Do this</li>
  <li>Step 2: Do that</li>
</ul>

Real-World Examples

Before

<ul class="menu">
  <span>Home</span>
  <span>About</span>
  <span>Contact</span>
</ul> <!-- Screen reader does not detect a list -->

After

<ul class="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul> <!-- Screen reader announces: 'List of 3 items' -->

Manual testing

  1. 1. Inspect all <ul> and <ol> elements.
  2. 2. Verify each direct child is an <li> (or has role="listitem" for ARIA lists).
  3. 3. If non-list elements are present, move or wrap them inside <li>.
  4. 4. Re-test with a screen reader to confirm items are announced in correct count and order.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance