Ensure <li> elements are used semantically

All <li> (list item) elements must be contained within a parent <ul> (unordered list) or <ol> (ordered list) element to maintain semantic structure and accessibility.

About This Rule

This rule ensures that all <li> elements are properly nested within <ul> or <ol> elements, enhancing accessibility for users who rely on assistive technologies. Adhering to this guideline aligns with the following standards:

• WCAG 2.1 (A): 1.3.1 Info and Relationships
• WCAG 2.0 (A): 1.3.1 Info and Relationships
• WCAG 2.2 (A): 1.3.1 Info and Relationships
• EN 301 549: 9.1.3.1 Info and Relationships

Why It Matters

Screen readers and other assistive technologies rely on proper list structures to convey information accurately. When <li> elements are not nested within <ul> or <ol> parents, users may not be informed that they are navigating a list, leading to confusion and a diminished user experience.

How to Fix

To ensure list items are correctly structured:

• Wrap <li> Elements in <ul> or <ol>: Enclose all <li> elements within a <ul> or <ol> to create a valid list structure.
  Copy

  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

• Avoid Using <li> Outside of Lists: Do not place <li> elements outside of <ul> or <ol> containers, as this breaks semantic structure and can confuse assistive technologies.
• Maintain Proper Nesting for Sub-Lists: When creating nested lists, ensure that the nested <ul> or <ol> is placed within an <li> of the parent list.
  Copy

  <ul>
    <li>Parent item
      <ul>
        <li>Child item</li>
      </ul>
    </li>
  </ul>

Examples

Incorrect

List items without a parent list element:

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Correct

List items properly nested within a <ul>:

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

More Information

• H48: Using ol, ul and dl for lists or groups of links