Inappropriate or Missing Li Element Check

Description

The “Inappropriate or Missing Li Element Check” evaluates whether there is any <li> (list item) element that is not contained within a parent list structure (e.g., <ul>, <ol>, or <menu>), or any list structure element without any <li> element.

Example outcome

I found 1 occurrence of an empty list or an <li> outside of the list.

Impact

• Visual Impairments: Screen readers may skip or misinterpret the item because it lacks context.
• Motor Impairments: Incorrect semantics may disrupt keyboard navigation patterns.
• Cognitive Disabilities: Users may not understand that the item is part of a list, causing confusion.

Fixes

To address inappropriate or missing <li> elements:

1. Locate the inappropriate <li> element or the list structure element with no <li> element.
2. If it is an <li> element outside a parent list structure, replace the <li> tag by another HTML tag that correctly serves the purpose.
3. Otherwise, either remove the list structure element or populate it with meaningful <li> elements.

Resources

• WCAG 2.2: Understanding Success Criteria 1.3.1
• WCAG 2.2 Techniques: Technique H48: Using ol, ul and dl for lists or groups of links
• WebAIM: Semantic Structure: Regions, Headings, and Lists