What This Rule Checks
Properly structured lists allow screen readers and other assistive technologies to recognize and communicate relationships between items. Lists need to be constructed using appropriate HTML elements, such as <ul>, <ol>, and <li>. When lists are created with non-semantic elements like <div> or <span>, users with screen readers or cognitive impairments may struggle to understand the content’s structure and relationships.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content.
Why This Matters
Screen readers announce list structure to help users understand content organization (e.g., “list, 5 items”). Invalid child elements break this announcement and may cause items to be skipped or read out of context.
How to Fix
Use <ul> for unordered lists and <ol> for ordered lists.
Nest list items within <li> tags.
Avoid using <div> or <span> elements to create lists, as these elements do not communicate the necessary semantic structure to assistive technologies.
Code Examples
<!-- Invalid child elements in list -->
<ul>
<div>Not a list item</div>
<p>Also not a list item</p>
</ul>
Copy
<!-- Properly structured list -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Copy
Common Mistakes to Avoid
- Placing <div>, <p>, or <span> directly inside <ul> or <ol>.
- Using lists for layout purposes rather than actual list content.
- Nesting lists incorrectly (inner <ul>/<ol> must be inside an <li>).
Tip: Proper document structure enables assistive technologies to present content meaningfully. Headings, lists, and semantic HTML elements create a navigable outline of the page that screen reader users depend on.
Related WCAG Criteria
- 1.3.1: Info and Relationships