Ensure that lists are structured correctly

Ensure that all ordered (<ol>) and unordered (<ul>) lists contain only permissible child elements to maintain semantic accuracy and accessibility.

About This Rule

This rule ensures that lists are structured correctly, 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 correctly structured lists to convey information accurately. Improperly nested or invalid child elements within lists can lead to confusion, making content difficult to navigate and understand for users with disabilities.

How to Fix

To ensure lists are properly structured:

• Use Only Permissible Child Elements: Within <ul> and <ol> elements, include only <li>, <script>, or <template> elements as direct children. For example:
  

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

• Avoid Non-Permissible Elements: Do not place elements such as <div>, <p>, or other block-level elements directly within <ul> or <ol>. If additional structure or styling is needed within a list item, nest these elements inside an <li>:
  

  <ul>
    <li>
      <div>Content within a list item</div>
    </li>
  </ul>

• Maintain Proper Nesting: When creating nested lists, ensure that the nested <ul> or <ol> is placed within an <li> of the parent list:
  

  <ul>
    <li>Parent item
      <ul>
        <li>Nested item</li>
      </ul>
    </li>
  </ul>

Examples

Incorrect

A list containing a <div> directly within a <ul>:

<ul>
  <div>Invalid content</div>
  <li>Valid item</li>
</ul>

Correct

A list with all content properly nested within <li> elements:

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

More Information

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