Ensure lists are structured with semantic HTML
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Lists must use <ul>, <ol>, and <li> elements so assistive technologies can announce list lengths and items properly.
How to fix this issue
Wrap related items in a list and ensure each item is an <li>. Do not use <div> or <p> elements for list structures.
Developer guidance
Avoid extra markup between <ul> and <li>. Screen readers expect direct list-item relationships.
Code examples
Incorrect Implementation
<div>• Item 1</div><div>• Item 2</div>Correct Implementation
<ul><li>Item 1</li><li>Item 2</li></ul>
Trusted by organizations across Europe working toward WCAG and EAA conformance