• June 30, 2025

Page Title: Correct Semantic Structure for List Items

Rule ID: listitem
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

How to Fix the Problem

To ensure proper semantic structure and accessibility, all <li> (list item) elements must be wrapped within a parent <ul> (unordered list) or <ol> (ordered list) element.

Here’s what you need to do:

• Always nest <li> elements within <ul> or <ol>. Standalone <li> tags outside a list structure are invalid and inaccessible.

  ✅ Correct Example:

  html

  KopierenBearbeiten

  <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>


  ❌ Incorrect Example:

  html

  KopierenBearbeiten

  <li>Coffee</li>
<li>Tea</li>
<li>Milk</li>


• Choose <ul> for unordered, bullet-style lists and <ol> for ordered, numbered lists, based on the content’s logical structure.

• Avoid using lists purely for layout or visual indentation. Always use them semantically to group related content.

• Nested lists should also follow this structure, where inner <ul> or <ol> elements reside within a parent <li> of the outer list.

Why it Matters

Screen readers rely on the semantic structure of HTML to interpret and convey content to users accurately. When <li> elements are not nested within <ul> or <ol> tags:

• The screen reader cannot announce that the user is in a list or how many items are in that list.

• It disrupts the navigational context for visually impaired users, making it difficult to understand the organization of information.

• Users may miss important information or struggle with orientation on the page, especially if multiple such instances exist.

Semantic HTML ensures that assistive technologies can deliver a clear, navigable, and meaningful experience.

Rule Description

This rule enforces the requirement that every <li> element must be a child of either a <ul> or <ol> element. It ensures that list items are correctly understood as part of a list and not just isolated pieces of content.

The Algorithm (in simple terms)

• Identify all <li> elements on the page.

• Check if each <li> is inside a <ul> or <ol>.

• If not, flag it as a failure.

The goal is to enforce that list items are used semantically, preserving their structural and accessibility role.