Ensure lists are structured with semantic HTML

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.

If items belong together, use a list — not just styled text.

Why this matters and how to fix it

Why this matters

Assistive technologies rely on semantic lists to communicate list structure, including the number of items. When lists are faked using <div> or <p> elements, screen reader users cannot understand grouping or navigation patterns, making content harder to scan and comprehend.

How to fix this issue

Use `<ul>` or `<ol>` for lists and `<li>` for list items. Do not simulate lists visually using bullet characters or icons without semantic list markup.

Automated detection · Manual review recommended

Developer guidance

Avoid placing non-list elements (e.g., <div>, <p>, <span>) directly between `<ul>`/`<ol>` and `<li>`. Screen readers expect list → listitem relationships. If using frameworks like React, ensure components render actual list markup, not styled divs.

Code examples

Incorrect Implementation

<div>• Item 1</div>
<div>• Item 2</div>

Correct Implementation

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Real-World Examples

Before

<div class="faq-list">
  <p>• Shipping info</p>
  <p>• Returns policy</p>
  <p>• Contact support</p>
</div>
<!-- Screen reader does NOT announce list structure → content feels unorganized -->

After

<ul class="faq-list">
  <li>Shipping info</li>
  <li>Returns policy</li>
  <li>Contact support</li>
</ul>
<!-- Screen reader announces: 'List of 3 items' → structure understood -->

CSS Example (Guidance)

/* Style lists visually without breaking semantics */
ul.faq-list {
  list-style: disc;
  padding-left: 1.25rem;
}
ul.faq-list li {
  margin-bottom: 0.5rem;
}

Manual testing

  1. 1. Inspect the list region in DevTools.
  2. • Confirm that grouped items use <ul> or <ol>, not <div>/<p> with bullets.
  3. 2. Turn on a screen reader (NVDA, VoiceOver, or TalkBack).
  4. 3. Navigate to the list.
  5. • Expected: Screen reader announces 'List of X items'.
  6. • Failure: It reads items as isolated paragraphs with no list context.
  7. 4. Move through items with arrow keys.
  8. • Expected: Each item is announced as a list item (e.g., 'list item, Shipping info').
  9. 5. If the list is interactive (menus, dropdowns, sidebars), confirm markup still uses <ul>/<li> rather than divs styled to look like lists.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance