---
title: "<li> Semantic Usage | Accessibility Rule"
description: "<li> elements must be contained in a <ul> or <ol>"
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/listitem
  md: https://testingbot.com/support/accessibility/web/rules/listitem/index.md
---
# Ensure \<li\> elements are used semantically

Rule ID: listitemUser Impact: seriousGuidelines: WCAG 2.0

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. 

    <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. 

    <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](https://www.w3.org/WAI/WCAG21/Techniques/html/H48)

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [marquee](https://testingbot.com/support/accessibility/web/rules/marquee)
- [meta-refresh](https://testingbot.com/support/accessibility/web/rules/meta-refresh)
- [meta-viewport](https://testingbot.com/support/accessibility/web/rules/meta-viewport)
- [nested-interactive](https://testingbot.com/support/accessibility/web/rules/nested-interactive)
- [no-autoplay-audio](https://testingbot.com/support/accessibility/web/rules/no-autoplay-audio)