<ul> and <ol> must only directly contain <li> content elements

Rule Description

Lists must be marked up correctly, meaning they must not contain content elements other than <li> elements.

The Algorithm, in Simple Terms

Ensures that lists are structured correctly

Why this is Important

Screen readers have a specific way of announcing lists. This feature makes lists clearer to understand, but will only work if lists are properly structured.

When content elements other than list items are contained within a set of list elements, screen readers cannot inform the listener that they are listening to items within the list.

For a list to be valid, it must have both parent elements (a set of <ul> elements or a set of <ol> elements) and child elements (declared inside of these tags using the <li> element), and any other content elements are invalid.

Although some non-content elements such as script, template, style, meta, link, map, area, and datalist are permitted within lists, content elements other than <li> are not permitted.

Compliance Data & Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
  • Deafblindness
Severity: Critical
Issue Type:
  • WCAG 2.0 (A): MUST
  • WCAG 2.1 (A): MUST
WCAG Success Criteria:
  • 1.3.1 Info and Relationships
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

Ensure all ordered and unordered lists (defined by <ul> or <ol> elements) contain only <li> content elements.

Here is a list, using proper semantic markup:

<p> These are a few of my favorite things</p>
<ul>
     <li>Raindrops on roses</li>
     <li>Whiskers on kittens</li>
     <li>Bright copper kettles</li>
     <li>Warm woolen mittens</li>
     <li>Brown paper packages tied up with strings</li>
     <li>Cream colored ponies</li>
     <li>Crisp apple streudels</li>
     <li>Doorbells and sleigh bells</li>
     <li>Schnitzel with noodles</li>
     <li>Wild geese that fly with the moon on their wings</li>
     <li>Girls in white dresses with blue satin sashes</li>
     <li>Snowflakes that stay on my nose and eyelashes</li>
     <li>Silver white winters that melt into springs</li>
 </ul>

Related Deque University Course Pages

Other Related Resources

Additional Information

Related Rules:
  • Semantic Structure and Navigation: Lists - Navigation Lists
Relevant Technologies:
  • HTML 4
  • HTML5
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: list