The Issue
Lists defined with the HTML `<ul>` (unordered list) and `<ol>` (ordered list) elements must contain only valid list item (`<li>`) elements as direct children. Other types of content elements like headings, paragraphs, divs, etc. cannot be nested directly inside lists. This invalid structure prevents screen readers from properly conveying list information to users.
Why Proper List Structure Matters for Accessibility
Screen readers have specific ways of navigating and announcing lists to provide clearer understanding. This includes conveying the number of items, hierarchy (nested sublists), and position within the list sequence.
But these features rely completely on the proper semantic structure:
- Valid `<ul>` or `<ol>` parent containers
- Direct `<li>` children defining each list item
- No other content elements improperly nested inside
When syntax rules are broken and non-list content elements appear, screen readers cannot accurately communicate vital list information. Users may not know they are within a list nor understand relationships between items.
Example of Proper List Markup
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
</ul>
How to Resolve List Structures
Ensuring valid list markup is straightforward:
- Use `<ul>` and `<ol>` elements only to contain list items
- Directly nest `<li>` elements inside to represent each item
- Do not embed headings, paragraphs, divs or other content elements
- Non-content elements like `<script>`, `<template>` and `<meta>` can appear
Learn More on Proper List Techniques
Deque University covers advanced list structures and semantics in their Lists course.
Additional references:
- Review the full list of accessibility rule checks for more ways to identify and fix common issues.