list

Description

The list rule ensures that <ul> (unordered list) and <ol> (ordered list) elements only contain <li>, <script>, or <template> elements as direct children. Inserting non-list elements such as <p>, <div>, or <span> directly inside a <ul> or <ol> violates the HTML specification and produces malformed list structure. Screen readers depend on properly structured lists to count items, announce list boundaries, and allow users to navigate efficiently between items.

This rule meets WCAG requirements by:

1. Conveying Information and Relationships (WCAG 1.3.1 Info and Relationships): It ensures that the structure and relationships of list content are programmatically determinable. A malformed list may prevent assistive technologies from correctly identifying list boundaries and item counts.

To comply with this rule, ensure that every direct child of a <ul> or <ol> element is an <li> element.

Examples

This example shows a <p> element placed directly inside a <ul>. This is invalid HTML and creates an unpredictable accessibility experience.

Here, only <li> elements appear as direct children of the <ul>, which is valid HTML and produces correct list semantics for assistive technologies.

How to fix?

To fix violations of the list rule, follow these steps:

• Identify all <ul> and <ol> elements that contain non-list-item children.

• Move any content that is not an <li> outside the list element, placing it before or after the list as appropriate.

• If the non-list content is meant to introduce or describe the list, place it in a <p> or heading element immediately before the <ul> or <ol>.

• Ensure all direct children of <ul> and <ol> are <li> elements. Content that belongs inside a list item should be nested within <li>.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships